Angular: how to change css using ViewChild

Question

I would like to change a css style using ViewChild or Renderer2, but I am unable to. Do you have a code example?

Below is the code that does't work.

constructor(private renderer: Renderer2) {}

public onClick(){                
      this.renderer.setStyle('main-wrapper', 'color', 'blue');   
     }

Answer 1

Try this:

export class BypartSubBarComponent implements AfterViewInit {
@ViewChild('subbar', {static: false}) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(this.subbar._elementRef.nativeElement, 'backgroundColor', '#ff0000');
  }
}