I have one question about.. How can we convert below statement to angular`s renderer2 ?

this.elementRef.nativeElement.style.setProperty( '--primary-color ' , '#455363' )

Above statement is changing css-variable into the directive when dark mode is selected. As in angular it is not good practice to access DOM directly, thats why we uses renderer2. But i do not know how to convert above statement to renderer2 for safely access DOM.

At very simple, can anyone tell me how to safely change css-varible in directive using renderer2 or best way to get css-variable into directive.

Thanks you.

I have one question about.. How can we convert below statement to angular`s renderer2 ?

this.elementRef.nativeElement.style.setProperty( '--primary-color ' , '#455363' )

Above statement is changing css-variable into the directive when dark mode is selected. As in angular it is not good practice to access DOM directly, thats why we uses renderer2. But i do not know how to convert above statement to renderer2 for safely access DOM.

At very simple, can anyone tell me how to safely change css-varible in directive using renderer2 or best way to get css-variable into directive.

Thanks you.

• javascript
• css
• angular
• typescript

• just a suggestion, don't change the css variables with angular. set style and change the style name. it's easier to style the ponent. you can even enable theming. this is not consider as a good approach – Mohammad Hossein Amri Commented Jun 29, 2020 at 3:34
• @MoHradA Can you give one example link on theming? And can you provide more details on how it is not good practice to change css variables with angular ? – Gaurang Dhorda Commented Jun 29, 2020 at 7:27
• check akveo.github.io/nebular/docs/design-system/… it's all done through mixin and functions and a single service – Mohammad Hossein Amri Commented Jun 29, 2020 at 7:31
• @MoHradA Thank you for your suggestion!! What I am going to achieve is bit of like this similar approach but different way. You can check out my little implementation in this link stackblitz./edit/… – Gaurang Dhorda Commented Jun 29, 2020 at 9:52
• @MoHradA In my way I am using Directive. We can place this directive as parent wrapper. One service for theme-change. and Let user will decide how they uses this directive and service. What they need to do is First, Define their own variable color scheme, then they need to pass that color scheme to service method changeTheme() . – Gaurang Dhorda Commented Jun 29, 2020 at 9:57

3 Answers 3

As I have gone through more details about setStyle() of renderer2 there are total Four parameters we can pass on it.

/**
    * Implement this callback to set a CSS style for an element in the DOM.
    * @param el The element.
    * @param style The name of the style.
    * @param value The new value.
    * @param flags Flags for style variations. No flags are set by default. enum: 1 or 2, 
      1: Marks a style as important.   
      2: Marks a style as using dash case naming (this-is-dash-case).
*/

abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;

Now we can pass fourth parameter 2 , that will helps to define css-variable with - style variable, without 2 parameter setStyle() will not recognize cas-variable. So this is actual my answer to my question..

`this.renderer.setStyle(this.elementRef.nativeElement, `--primary-color`, '#455363' , 2 )` 

I believe you're looking for something along these lines:

constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

ngOnInit() {
  this.renderer.setStyle(
    this.elementRef.nativeElement,
    '--primary-color',
    '#455363'
  );
} 

from your question I guess that you want to enable theming, so here is solution which isn't related directly to your question but give you a better insight on how this could be worked out

.theme1{
  --primary-color: red;
}

.theme2{
  --primary-color: blue;
}

// inside ponent1
:host{
   background-color : var(--primary-color);
}

//inside the AppComponent 
<body[class]="isTheme1? 'theme1': 'theme2'">
 <ponent1></ponent1>
</body>

to explain it. each css variable is scoped to its style. meaning if style1 is applied to the ponent or parent, then the value that is available inside that ponent will read from the parent/self element

<!-- scoped to the body-->
<bod class="theme1">
    <div>
        <ponent1> </ponent1>
    </div>
    <div>
        <ponent1> </ponent1>
    </div>
</body>
<!-- scoped to parent div -->
<bod >
    <div class="theme1">
        <ponent1> </ponent1>
    </div>
    <div class="theme2">
        <ponent1> </ponent1>
    </div>
</body>

<!-- scoped to the ponent and mix and match  -->
<bod class="theme1">
    <div>
        <ponent1> </ponent1>
    </div>
    <div>
        <ponent1 class="theme2"> </ponent1>
    </div>
</body>

so with above code, your ponent will have two different color side by side. you probably don't want to do mix and match, but I kept this here to show that the scope of variable is based on the parent/self element.

nebular is doing it more professionally but it's the whole idea