Is there a way to change a CSS property to a variable value in Angular 4?

Answer 1

This is another great question. Having to modify values in many different places (especially when they're all the same) is tedious and not scalable. Variables to the rescue! In this case, yes, you can use CSS variables with Angular. What I'll do is allow for the folks over at MDN to explain how to do that: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

The only caveat is the browser compatibility. As of this writing (also see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Browser_compatibility), variables are not supported in IE. Depending on use cases, this may be OK, but it's good to know.

Another solution might be to use a CSS preprocessor like LESS and then create some global file (maybe something like theme.less) which can create variables to be used elsewhere. Imagine the following:

//////////////

theme.less

//////////////

@my-custom-color: #123;

//////////////

my-container.component.less

//////////////

import (reference) 'theme.less';

:host {

background-color: @my-custom-color;

}