Binding CSS Variables in Angular

I recently tweeted about the ability to bind variables in Angular and found out that many people don’t know that we can do it. This ability exists from version 9, or by its official name — Ivy.

So, I decided to write a short article that’ll make the information accessible to everyone. We can bind CSS variables in the template using the style property:

Or in our component using HostBinding:

We can do many powerful things with CSS variables such as styling pseudo-elements, math, etc. I want to show you a real use case that I used to apply animation staggering:

If for some reason you’re not using Angular v9+, you can create a directive that does the same:

🚀 In Case You Missed It

Here are a few of my open source projects:

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular
• error-tailer — Seamless form errors for Angular applications
• Forms Manager: The Foundation for Proper Form Management in Angular
• Cashew: A flexible and straightforward library that caches HTTP requests
• Error Tailor — Seamless form errors for Angular applications

And many more!

Follow me on Medium or Twitter to read more about Angular, Akita and JS!