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