What is the role of the Renderer2 class in Angular, and how do you use it?

The ‘Renderer2‘ class in Angular plays a crucial role in manipulating the DOM (Document Object Model) elements in a platform-independent manner. It is an abstraction provided by Angular to perform DOM manipulations in a safe and secure way without directly accessing the browser-specific DOM APIs. This abstraction allows the framework to support server-side rendering, web workers, and different rendering platforms, making the Angular applications more flexible and robust.

Using ‘Renderer2‘, you can create, update, or delete elements, apply or remove CSS classes, apply styles, and listen to events. It also prevents direct access to the native DOM elements, which protects your application from XSS (Cross-site Scripting) vulnerabilities.

To use ‘Renderer2‘, follow these steps:

1. Import ‘Renderer2‘ and ‘ElementRef‘ classes in your component:

import { Renderer2, ElementRef } from "@angular/core";

2. Inject ‘Renderer2‘ class in the constructor of the component:

constructor(private renderer2: Renderer2, private elementRef: ElementRef) { }

3. Perform DOM manipulations with ‘Renderer2‘ methods. Some common methods with examples are:

- To create a new element:

     const div = this.renderer2.createElement('div');

- To create and set text content of a text node:

     const textNode = this.renderer2.createText('Hello World');

- To set attributes, styles, and classes of an element:

     this.renderer2.setAttribute(element, 'attribute-name', 'attribute-value');
     this.renderer2.setStyle(element, 'property', 'value');
     this.renderer2.addClass(element, 'class-name');

- To remove attributes, styles, and classes from an element:

     this.renderer2.removeAttribute(element, 'attribute-name');
     this.renderer2.removeStyle(element, 'property');
     this.renderer2.removeClass(element, 'class-name');

- To listen to DOM events:

     const listener = this.renderer2.listen(element, 'event-name', (event) => {
         // your event handler
     });

- To un-listen to DOM events (call the listener function returned by ‘listen()‘):

     listener();

4. Append child elements to existing elements:

this.renderer2.appendChild(parentElement, childElement);

Keep in mind that ‘Renderer2‘ does not always have the best performance, especially with Angular’s change detection mechanism. You may want to consider using Angular’s other APIs like interpolations, template bindings, or property bindings before opting for ‘Renderer2‘.

Here is a complete example of using ‘Renderer2‘ to change the background color of a ‘div‘ element on click:

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div (click)="changeBgColor()">Click me to change my background color</div>`
})
export class AppComponent {
  constructor(private renderer2: Renderer2, private elementRef: ElementRef) { }

  changeBgColor() {
    const newColor = 'blue';
    const divElement = this.elementRef.nativeElement.querySelector('div');
    this.renderer2.setStyle(divElement, 'background-color', newColor);
  }
}

In this example, we import ‘Renderer2‘ and ‘ElementRef‘, inject them into the constructor, and use the ‘setStyle‘ method of ‘Renderer2‘ to change the background color of the ‘div‘ element when it is clicked.