3 ways to add dynamic CSS custom properties in Angular components

Sometimes you may need to programmatically set the value for a CSS custom property while building components in Angular. I personally run into situations occasionally where I need to use a custom property that needs to be set with a dynamic value. Like a bar chart for example, where the items in the chart are based off of dynamic data.

Well in this video, we’re going to look at three different ways to set custom properties programmatically. We’ll use basic style binding, then we’ll use the Renederer2 setStyle() method, and after that, we’ll use host element binding.

------------------------------------------------------------------------------

🔗 Demo Links:

------------------------------------------------------------------------------
📚 Additional Resources:

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
0:40 – Using Style Binding in the Component Template
2:49 – Using the Renderer2 setStyle() Method with RendererStyleFlags.DashCase
7:26 – Using Style Binding on the Component Host with Host Element Binding
8:40 – Conclusion

------------------------------------------------------------------------------

#angular #angulartutorial #css

[AllanLange]

Love this! So glad I found you channel, you do a very good job at explaining the process and the different options.

[EmilyGHerr]

Style binding did the trick for me. Super simple! Thanks for the video tutorial.

[akivagubbay]

Thanks.
You could also implement the host option in a Directive. Make it reusable.

[НикитаКлусович]

Thank you for your video, solving this problem with 'host' looks really elegant in this particular case. But personally, I think that the usage of 'effect' instead of OnInit life cycle method decrease readability of the code)