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
Hi Sir, the new Angular Material styling docs are incredibly helpful, and this video made them so much easier to understand and apply. Thank you for this wonderful video.
Hi! First of all, thank you for your awesome content. Secondly, I want to ask you something. I'm using mat-sidenav for the mobile view of my site. Could you explain how I can make the open and close transitions smoother? I tried using the transition CSS property, but it didn't help. I want to make it slower and smoother. I have a menu icon, and when I press it, the sidenav opens. When I click the close button, it fully closes.
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.
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
Great Video: Q1: What if same application is being used multiple clients and there is a requirement of changing theme per client is it possible? And What is the best way to do that considering we have same application instead of clones? Q2: Importing "angular-material as mat" I am just wondering does it import ALL mixins what will be bundle size and it will be impacted in DOM when alot of pages and alot of components has these Token overriding? Any experience?
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.
It doesn't look like the docs are complete. 'list-item-hover-leading-icon-color' will actually set the hover colour of the icon even though it's not listed as a token. I've also tried 'list-item-focus-leading-icon-color' but that throws an error
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
It seems the ship has definitely sailed for Angular! React and Next.js have taken over the scene, and let’s face it-Styled Components (shadcn/ui) give everything a sleeker, more polished look. Angular had a good run, but it might be time to board a more modern ship.
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 :)
I really really love the design tokens and what they have done to make Material more customizable. Amazing really
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
The before and after for these styles is night and day. Very excited to get started with this, thank you for the overview.
Welcome, Micheal! Glad you liked it :)
Coming up: A new set of material components which don't look like material components 😂
Hi Sir, the new Angular Material styling docs are incredibly helpful, and this video made them so much easier to understand and apply. Thank you for this wonderful video.
Glad you liked it! 😊
In one of the project, i have to to migration M2-> M3, Your vides really help me a lot in migration, Thank for the videos
That's great to know, Kashif! Thanks for letting me know. How was your experience of migration from M2 to M3?
Hi! First of all, thank you for your awesome content.
Secondly, I want to ask you something. I'm using mat-sidenav for the mobile view of my site. Could you explain how I can make the open and close transitions smoother? I tried using the transition CSS property, but it didn't help. I want to make it slower and smoother. I have a menu icon, and when I press it, the sidenav opens. When I click the close button, it fully closes.
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
Is it possible to reduce the height of textbox or dropdown
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
Great Video:
Q1: What if same application is being used multiple clients and there is a requirement of changing theme per client is it possible? And What is the best way to do that considering we have same application instead of clones?
Q2: Importing "angular-material as mat" I am just wondering does it import ALL mixins what will be bundle size and it will be impacted in DOM when alot of pages and alot of components has these Token overriding? Any experience?
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.
It doesn't look like the docs are complete. 'list-item-hover-leading-icon-color' will actually set the hover colour of the icon even though it's not listed as a token. I've also tried 'list-item-focus-leading-icon-color' but that throws an error
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
awesome
Thanks Arif ☺️
man yoou and i are for real on the same track LOL! These work in 18. as well :) I think the mat documentation was way behind
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 :)
It seems the ship has definitely sailed for Angular! React and Next.js have taken over the scene, and let’s face it-Styled Components (shadcn/ui) give everything a sleeker, more polished look. Angular had a good run, but it might be time to board a more modern ship.
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 :)