Modify DOM elegantly using Angular ElementRef and Render2
This is an example using ElementRef and Render2 to modify CSS style dynamically.
import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
<h2 #greet>Hello {{ name }}</h2>
`,
})
export class AppComponent {
name: string = 'ElementRef usage';
@ViewChild('greet')
greet: ElementRef;
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
ngAfterViewInit() {
// this.greet.nativeElement.style.backgroundColor = 'red';
this.renderer.setStyle(this.greet.nativeElement, 'backgroundColor', 'red');
}
}