Angular：如何使用ViewChild更改CSS

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

The first argument needs to be the element. For example, if your element has the id of main-wrapper, then you could do:

const element = document.getElemenetById('main-wrapper');
this.renderer.setStyle(element, "color", "blue");

Though, I'd recommend using ViewChild instead:

<div #mainWrapperElement>
     ....
</div>

import { ViewChild } from '@angular/core';

@ViewChild('mainWrapperElement') myElement: HTMLElement;

then...

this.renderer.setStyle(this.myElement, "color", "blue");

On a side note, angular has really cool ways to manipulate styles that I would suggest looking into (ngStyle or style binding).

Answer 2

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