How to add multiple styles to the native element in Angular

Question

I'm trying to add multiple styles to the native element in angular, currently using the renderer2 API.

I've a requirement in which the styles will change dynamically and it can have many styles. That's why I'm not using the class (addClass/removeClass).

constructor( private elRef: ElementRef, private renderer: Renderer2 )

this.renderer.setStyle(this.elRef.nativeElement, "text-align", "center"); .... ...

need a way to add the styles dynamically. something like: this.renderer.setStyle(this.elRef.nativeElement, {style1: value1, style2: value2});

Answer 1

try this

 constructor(private element: ElementRef){
    let el = this.element.nativeElement;
    el.setAttribute('style', 'color: white; background: red');
  }

Answer 2

You have to call it multiple times for each style or simply use addClass and define styles in class.

https://angular.io/api/core/Renderer2#addclass

https://angular.io/api/core/Renderer2#setStyle