Customizing Angular Material just got easier in v18!

#angular #material #design
🧪 Try out a theme builder app I created using design tokens here:
material-theme-builder.zoaibk...
In this video, I discuss the new changes in Angular Material v18 - which will make customization of components so much more easier!
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
00:00 Introduction to Angular Material 3 Customization
00:09 Exploring Custom Button Styler with Angular Material
01:16 The Challenge of Customizing Angular Material Components
04:17 Transition to Material Design Components (MDC)
05:20 Leveraging CSS Variables for Customization
06:28 Implementing Custom Styles with CSS Variables
11:23 Future of Angular Material Customization
13:44 Conclusion and Next Steps
Cheers!

[@stevewitman]

Awesome! This is great news!

[@yelose85]

Great video! I can't wait to try it!

[@ZoaibKhan]

Hope you like it! 😀

[@kylerjohnson988]

Thanks for the great demo and explanation.

[@ZoaibKhan]

You're welcome, Kyler! Glad you found it useful :)

[@LarsRyeJeppesen]

Great , thank you

[@ZoaibKhan]

Glad you liked it! 😊

[@skitto6554]

You are the man!!!

[@ZoaibKhan]

🙏

[@HypemanWaz]

Vid put toghether nicely. Would like to hear more about the host component prop.

[@ZoaibKhan]

Glad you liked it! The host component binding is the best way currently to bind attributes and css classes on the component with signals. That's why I've used it here in this way.

[@stevewitman]

In the new Angular Material v18, what is new/different with customizing the overall color theme? Also, will there be any additional options for global theme customization (things that apply to all or many of the Angular Material components) besides the color, typography and density that is available in v17? Maybe this could be another video.

[@ZoaibKhan]

The theming config is basically the same - color, typography and density. But the color theming API seems simpler requiring only two color palettes, primary and tertiary. Also there's a utility for generating a material theme based on a single primary color hue - which I think will be very useful! Will be discussing quicker ways of theming in next video

[@raul834]

Great video! Thank you very much. Is there any statement from Angular Material about their commitment to the tokens? Will they stay stable?

[@ZoaibKhan]

Yes, there is a mention of them being "stable" in the FAQs for v17 and a schematic to be provided in case they change before being stable. v17.material.angular.io/guide/material-3#can-i-depend-on-the-css-custom-property-names-being-stable

[@raul834]

@@ZoaibKhan thank you again. You got my subscription. I have been looking at lots of Angular videos and your channel must be one of the best.

[@ZoaibKhan]

@@raul834 🙏

[@CodeZakk]

hi instead of using host can you show us how to apply the styles in css directly thanks!

[@ZoaibKhan]

Hey Zakk, you can just set the relevant CSS variable/property directly in the styles under a class name and then apply that class to wherever you want to apply it

[@wilfredomartel7781]

🎉

[@ZoaibKhan]

👍👍

[@radvilardian740]

the worst thing about angular is angular material, everytime u do upgrade version it breaks really hard, again and again.

[@ZoaibKhan]

It should get better on this count with design tokens and easier customization! :)

[@aqibjabbar5914]

Overall, its good, but i am experiencing ng-deep is deprecated now, and its not a good approach , use Host something like that, I think so

[@ZoaibKhan]

Ng deep is coming back soon :p

[@sow-jr4xr]

waste video :(

[@ZoaibKhan]

Thanks for your comment...

[@BJAnderson]

Great video. Thanks for the effort! You can use sass to compile your styles.scss file into styles.css and it will have all the css variables defined in there. Add this to your package.json scripts: "sass": "sass --load-path ./node_modules --load-path ./ --no-source-map", "sass:styles": "npm run sass src/styles.scss ./tmp/styles.css", Then run npm run sass:styles The generated css file will be in the tmp folder under your project root. If you have your material config defined in a different file, you have to compile that file instead of styles.scss... There are about 850 --mat-* css variables defined in my styles.css in Ng18

[@ZoaibKhan]

Oh, nice way of finding out all design tokens! Thanks for the input 🙏