1

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.

Improve this question
6
  • just a suggestion, don't change the css variables with angular. set style and change the style name. it's easier to style the component. you can even enable theming. this is not consider as a good approach 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 ? 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 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.com/edit/… 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() . Commented Jun 29, 2020 at 9:57

3 Answers 3

Reset to default
9

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 )`
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Instead of hardcoding 2 its better to use the RendererStyleFlags2 symbolic constants: this.renderer.setStyle(nativeElement, '--primary-color', '#455363' , RendererStyleFlags2.DashCase)
0

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'
  );
}
Improve this answer

5 Comments

Are you sure this will work? Since setStyle() doesn't recognize --primary-color CSS variable.
I'm not sure, no, I haven't tried adding styles this way, but does it throw an error?
--primary-color isn't a proper css property so angular won't add any style using setStyle().
Checkout my findings answer on setStyle(), we have to pass fourth parameter for accessing css-variable with - style.
Excellent finding! Have upvoted your answer, will delete mine in a few hours so you can see this message first ^^
0

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 component1
:host{
   background-color : var(--primary-color);
}

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

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

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

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

so with above code, your component 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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.