javascript - Mejor manera de acceder a una variable CSS en una directiva personalizada de Angular

Tengo una pregunta sobre.. ¿Cómo podemos convertir la siguiente declaración al renderer2 de Angular?

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

La declaración anterior está cambiando la variable CSS en la directiva cuando se selecciona el modo oscuro. Como en Angular no es buena práctica acceder directamente al DOM, por eso usamos renderer2. Pero no sé cómo convertir la declaración anterior a renderer2 para acceder de manera segura al DOM.

De manera muy simple, ¿alguien puede decirme cómo cambiar de forma segura una variable CSS en una directiva usando renderer2 o la mejor manera de obtener una variable CSS en una directiva?

Gracias.

Respuesta #1

A medida que he revisado más detalles sobre setStyle() de renderer2, hay un total de cuatro parámetros que podemos pasarle.

/**
    * 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;

Ahora podemos pasar el cuarto parámetro 2, que ayudará a definir una variable CSS con el estilo de variable -, sin el parámetro 2 setStyle() no reconocerá la variable CSS. Así que esta es en realidad mi respuesta a mi pregunta..

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

Respuesta #2

Creo que estás buscando algo por el estilo:

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

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