Customizing Angular Material just got easier in v18!

[@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 🙏

[@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

[@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

[@javascript_developer]

Great. thank you for making this. It make angular material customized very easy. I recently upgraded my angular app from 16 to 18. And yes this technique helped me to understand better about material.

[@ZoaibKhan]

Great to hear that! And you're welcome :)

[@stevewitman]

Awesome! This is great news!

[@substance90]

5:00 been there, done that. It was painful, believe me!

[@yelose85]

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

[@ZoaibKhan]

Hope you like it! 😀

[@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.

[@skitto6554]

You are the man!!!

[@ZoaibKhan]

🙏

[@kylerjohnson988]

Thanks for the great demo and explanation.

[@ZoaibKhan]

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

[@fityfive]

this was very helpful , im stressing about upgrading angular as the material issues have been holding me back. this video gave me some hope although i still know it's going to be agonising.

[@ZoaibKhan]

I know how it feels, been through a painful migration myself. Good luck and hope it goes well! 🤞

[@sachetacharya477]

Angular material Custom theme not working in angular 18

[@ZoaibKhan]

Are you using the material 3 guide? Because the syntax has changed a bit

[@LarsRyeJeppesen]

Great , thank you

[@ZoaibKhan]

Glad you liked it! 😊

[@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 🙏

[@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

[@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! :)

[@wilfredomartel7781]

🎉

[@ZoaibKhan]

👍👍

[@upcom1ng116]

Your title said 18 but the video clearly shows 17.3.6,

[@ZoaibKhan]

Yes, the customization options were experimental in 17, but are stable in v18 onwards

[@sow-jr4xr]

waste video :(

[@ZoaibKhan]

Thanks for your comment...