Angular2 dynamic change CSS property

Question

We are making an Angular2 application and we want to be able to somehow create a global CSS variable (and update the properties' values whenever changed when the variable is assigned).

We had used Polymer for a while (now we are switching to Angular2 components) and we had used CSS properties (Polymer has some polyfill) and we had just update styles using Polymer.updateStyles().

Is there any way how we can achieve a similar function?

EDIT:

We want something similar to Sass color: $g-main-color or to CSS custom properties color: var(--g-main-color) and whenever we decide to change the value of the property, e.g. something like updateVariable('g-main-color', '#112a4f') it dynamicly update the value everywhere. All that while an app is running.

EDIT 2:

I want to use some global CSS variables in different parts (host, child element...) of my CSS and be able to change the value immediately - so if I change my-color variable, it changes everywhere in app.

I will use Sass syntax for example:

:host { border: 2px solid $my-color } :host .some-label { color: $my-color } 

Is possible to use something like Angular pipes? (But it supposedly only works in HTML)

:host { border: 2px solid {{ 'my-color' | cssvariable }} } :host .some-label { color: {{ 'my-color' | cssvariable }} } 

Answer 1

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

Answer 2

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");