Customizing Angular Material just got easier in v18!

Рет қаралды 19,267

Күн бұрын

Пікірлер: 38

@javascript_developer 3 ай бұрын

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 3 ай бұрын

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

@stevewitman 9 ай бұрын

Awesome! This is great news!

@fityfive 3 ай бұрын

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 3 ай бұрын

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

@yelose85 9 ай бұрын

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

@ZoaibKhan 9 ай бұрын

Hope you like it! 😀

@kylerjohnson988 9 ай бұрын

Thanks for the great demo and explanation.

@ZoaibKhan 9 ай бұрын

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

@HypemanWaz 8 ай бұрын

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

@ZoaibKhan 8 ай бұрын

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 9 ай бұрын

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 9 ай бұрын

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

@skitto6554 8 ай бұрын

You are the man!!!

@ZoaibKhan 8 ай бұрын

🙏

@LarsRyeJeppesen 9 ай бұрын

Great , thank you

@ZoaibKhan 9 ай бұрын

Glad you liked it! 😊

@BJAnderson 8 ай бұрын

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 8 ай бұрын

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

@substance90 Ай бұрын

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

@raul834 8 ай бұрын

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

@ZoaibKhan 8 ай бұрын

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 8 ай бұрын

@@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 8 ай бұрын

@@raul834 🙏

@CodeZakk 8 ай бұрын

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

@ZoaibKhan 8 ай бұрын

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