If you are working on Angular, then you must know about Renderre2
. It is a complete API of Angular that allows rendering virtual DOM that makes the application performant.
Renderer2 is a class that provided API to manipulate elements of your APP without directly touching the DOM. It can be used in applications like Server-side rendering, native mobile app, and applications that don’t have DOM access.
import {Component,Renderer2,ViewChild,ElementRef,
AfterViewInit
} from "@angular/core";
@Component({
selector: "my-app",
templateUrl: `
<h1 #h1> Hello World</h1>`,
styles: []
})
export class AppComponent implements AfterViewInit {
@ViewChild("h1") el: ElementRef;
constructor(private rd: Renderer2) {}
ngAfterViewInit() {
this.rd.setStyle(this.el.nativeElement, "color", "red");
}
}