Angular2 dynamic change CSS property

Issue

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

Solution

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

Answered By – raythurnevoid

Answer Checked By – Senaida (FlutterFixes Volunteer)