Angular2 dynamic change CSS property

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?


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.


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 }} }



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.