วีดีโอ

It's a best practice to keep it in a service, so that the component does not have much logic and only shows the data fetched

Yes, patterns will eventually emerge for the resource API for different use cases. Already some have suggested declaring resource in a service so that the component remains dumb. The same can be done with ngrx as well I guess

I have one more question. I want to use a custom scrollbar for my site. The main content of the site is placed in the `mat-content`, and I'm using a background color for it. If I use a custom scrollbar for the body tag of the site and the scrollbar has a border-radius, there will be white spaces at the top and bottom because `mat-content` doesn't take the full width and height of the body. If I use a custom scrollbar for `mat-content` and set it to full height and width, it works, but when I change the screen size, this custom scrollbar remains visible every time. It's very annoying, especially on mobile screens. If I do it for the body, it works fine, but it leaves those corners.

Hmm, that's interesting. It should be easy with CSS transitions. I'll have to try it out and see for myself.

If possible, can you replicate this in a stackblitz so I can see exactly what is happening? That would be very helpful

@@ZoaibKhan youtube deleting the link.How can I give you the link for stackblitz ?

@@IvanMalinovskyi-q4z send it to consult@zoaibkhan.com

Yeah there are some properties missing...we can also verify in the styles tab as well if we feel some property is not mentioned here

I think this video was done before signal inputs came along :)

Glad you liked it 😊

Well, you can use mat card if you'd like. But since I wanted a more custom design, I went for my own styling. Mat card is basically just styling for the most part, so I only use if I want a material looking card quickly

@@ZoaibKhan i tried using theme but the themes can't be applied your custom widget. it confused me and my code so i decided to implement mat-card. i will see the result soon :)

@ksknysn that sounds good! For theming, I've another video on dynamic color variables where I use them to theme the widget component. Check that out in the theming playlist on the channel

@@ZoaibKhan thanks. i just now started to implementing it

@@ZoaibKhan if you add different theme options i think we can buy your dashboard :)

Glad you liked the series! Next up is a basic Angular crash course :)

Thanks Ryan! Glad you liked it :)

Just uploaded it - there was a technical issue on lemon squeezy which is resolved now :) Glad you liked the store - I love refactoring stuff - so enjoyed this process!

@@ZoaibKhan i just bought it to play around with it. I wish you had a shared githib private repo that all your pateron supporters could collaborate on. i think that would be awesome. thanks buddy!

It's part of the dashboard - the complete code can be bought on the link in the description.

Well, you can create a separate component and route for login - and then keep the rest of the dashboard + menu routes in a separate set of routes. There will be a router outlet on the main app component - and then there is already a router outlet for the normal page routes but it'll be nested inside the container Hope that helps a bit! If not, this seems like a good thing to show on video :)

@@ZoaibKhan Your explanation is very clear. I thank you once again. I will implement it to see if I can be successful.

Check the other reply I've given on my recent video. Maybe I should create a video followup for this :)

@@ZoaibKhan Thank you very much for your feedback and for being so patient. In fact, a video would really help a lot.

I think we might see some built in way to define resources within the signal store in future versions on the pattern of with computed.

There is something similar already. Check out the Angular dashboard playlist on my channel

You're welcome :) Can you elaborate a bit? What's different about that specific component?

@@ZoaibKhan Thanks for respond :) I have sidenav menu similar to that one in your angular 18 nested menu video. I added also an internalization and i have to use language service in sidenav component because i wanted to have translation for menu items . So i initialize menu items values in constructor after getting a translation. I removed translation service and initailized menu items your way but Sidenav component still change theme with a little bit of delay

I already have in a recent video (though its using dynamic CSS color variables): th-cam.com/video/rLtF6MzTRA0/w-d-xo.html Will hopefully do a simpler one soon :)

you mean a menu generated from the firestore or something else?

@@ZoaibKhan yes, this, with the menu information recorded in a DB (firebase).

Thanks so much! Glad you liked it.

Wow, you're really following this quite closely. I noticed some issues too, so ultimately I've planned to switch to the view transition API, just waiting for safari support

​Maybe a fallback Option if client browser dont support view transition api ? ChatGpt gives me this, i cant test it yet: this.supportsViewTransition = 'startViewTransition' in document; If that works, its easy with @if or @switch template flow to made a fallback?​@@ZoaibKhan

@@alnes204 Yeah, that's the way to go about it! I'll let you know when I get to work on it - it seems like a fun video to make. View Transition API is due to be supported by all major browsers soon - so its great to learn about it as well

@@ZoaibKhan uhh nice, I'm really looking forward to this video 😄

Thanks 🙏 That's a good suggestion!

Glad you liked it ☺️

There is an observable based equivalent to resource called rxResource. More details in the blog post here. push-based.io/article/everything-you-need-to-know-about-the-resource-api

@@ZoaibKhan Thanx a lot zoaib

Yes, check the styling section for mat form field and mat select component. You can also use the density setting in the theming - I covered it on a video recently on sleek material forms

Does it not work as it is?

@@ZoaibKhan no as soon as you use light & dark theme colors from theme builder the elevation classes dont work. Im referring to pure M3 theming. no m2 compatability.

I like shadcn, it's great. Would love to have a similar headless UI lib in Angular as well. But that doesn't mean Angular is done. Modern Angular is getting really good with signals, easier components, better SSR support etc. So I wouldn't write it off just yet :)

Thanks Arif ☺️

There is also a density option in Angular material 15. Because its material 2, we need to use a different function define the theme. See example on the docs: $my-theme: mat.define-light-theme(( color: ( primary: $my-primary, accent: $my-accent, ), density: 0, )); v15.material.angular.io/guide/theming#applying-a-theme-to-components

@@ZoaibKhan thanx, could you pls make a short video to achive the same for angular 15 as you have done for material 3

It's not meant for that purpose and also would've taken lot more time to customize the styling to match the sidebar style. Also, it'd have made it more difficult to make it recursive - as I did in the next video in this series.

@ZoaibKhan I've done something similar using ngTemplateOutlet for recursion and the expansion panel for nested items. The problem was that I had to override many styles, especially for the expansion. And have a problem controlling which panel to open if a nested link is active Your approach is much simpler, and animation is totally customizable. Most of the time, sidebar components have to be more customizable and fit every need possible. Thanks a lot for your great work

@@MahmoudTarek-pz1rl thanks Mahmoud! My sidebar is still quite simple. Have you seen the new shadcn sidebar component? That is truly remarkable

@ZoaibKhan You're welcome, Simple but have a good potential and fulfil many requirements, Yes, I've seen it on the day of releas, and it is on another level The approach he follows is really great. I hope we can have a similar package for angular. Maybe one day Spartan UI will do it as they say

Yes, this is in v18! Only the docs are due in v19 - and they're much needed :) Just for fun: what are you working on next? :p I'll probably be adding the ngrx signal store to the dashboard next week :)

​@@ZoaibKhan i could not beleive then i looked at the next documentation and saw all the new new section for styles. I am working on a mat toolbar and then a sidenav service so i can show or hide the sidenav based on the mat toolbar page. I look forward to your next video! I need to purchase this one i have the theme builder and another one but not this one

Thanks Adam! It's the sidebar used in the dashboard - except its just the sidebar :)

oh, thanks for pointing that out! My bad

Yes, it has come a long way since the MDC refactor which was quite painful, but it has made it quite customizable! And it's not only material, PrimeNG also using CSS variables now, so it seems like a common trend

Glad you liked it! 😊

what exactly is not working?

Q1 add new css vars to your themes. I have site with 10 themes, works perfectly

Thanks! For Q1: Each design token actually corresponds to a CSS variable, so you can switch between the CSS variables at runtime according to the client's theme. For Q2: It uses "use" from Sass, so it only imports the mixins once and we do that in the styles global file anyway, so any additional uses don't add on to what's there already.

Welcome, Micheal! Glad you liked it :) Coming up: A new set of material components which don't look like material components 😂

Glad you liked it :)

Glad you found it helpful ☺️

Welcome 🤗

Well, not replace exactly, but provide an alternative for now. Also, this is just for reading/fetching data, not for updating/creating.

You're welcome! 😄

Glad you liked it!