title: Angular2 dynamic change CSS property
body: <p>We are making an <strong>Angular2 application</strong> 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). </p>
  
  <p><em>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 <code>Polymer.updateStyles()</code>.</em></p>
  
  <p>Is there any way how we can achieve a similar function? </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>We want something similar to Sass <code>color: $g-main-color</code> or to CSS custom properties <code>color: var(--g-main-color)</code> and whenever we decide to change the value of the property, e.g. something like <code>updateVariable('g-main-color', '#112a4f')</code> it dynamicly update the value everywhere. All that while an app is running.</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>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. </p>
  
  <p>I will use Sass syntax for example:</p>
  
  <pre><code>:host { border: 2px solid $my-color }
  :host .some-label { color: $my-color }
  </code></pre>
  
  <p>Is possible to use something like Angular pipes? <em>(But it supposedly only works in HTML)</em></p>
  
  <pre><code>:host { border: 2px solid {{ 'my-color' | cssvariable }} }
  :host .some-label { color: {{ 'my-color' | cssvariable }} }
  </code></pre>