Q: Set custom css variable using hostbinding I am trying to make a component customizable by having the color as an input.
In the end, I want to be able to use the component like this <component-name color="myColor"></component-name>:
To start with, I'm trying to set the css variable using hostbinding, like this:


 @HostBinding('style.--color') myColor: string = '--blue'
:host {
  --blue: #5dbbbb;
  --green: #286e22;

  background-color: var(--color);
}


But the blue never renders. If I inspect the component in chrome, I can see that it has
"background-color: --color" When I look at the variable it's defined as --color: --blue
It works fine if I use the hex code directly (@HostBinding('style.--color') myColor: string = '#xxxxxx') instead of the css variable for the color, but I want to avoid that if possible. Any thoughts on what could be wrong? I'm using Angular14.

A: I think you should change your HostBinding code
this
 @HostBinding('style.--color') myColor: string = '--blue'

to
 @HostBinding('style.--color') myColor: string = 'var(--blue)'

And it should work
