Angular2 dynamic change CSS property
Just use standard CSS variables:
Your global css (eg: styles.css)
body {
--my-var: #000
}
In your component's css or whatever it is:
span {
color: var(--my-var)
}
Then you can change the value of the variable directly with TS/JS by setting inline style to html element:
document.querySelector("body").style.cssText = "--my-var: #000";
Otherwise you can use jQuery for it:
$("body").css("--my-var", "#fff");
1) Using inline styles
<div [style.color]="myDynamicColor">
2) Use multiple CSS classes mapping to what you want and switch classes like:
/* CSS */
.theme { /* any shared styles */ }
.theme.blue { color: blue; }
.theme.red { color: red; }
/* Template */
<div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
<div class="theme" [class.blue]="isBlue">
Code samples from: https://angular.io/cheatsheet
More info on ngClass directive : https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html