Renderer2 in Angular

The Renderer2 service in Angular is used to manipulate DOM elements in a platform-agnostic way. It provides an abstraction layer that allows you to make changes to the DOM without directly accessing the native DOM elements. This is especially important for applications that might run in environments other than the browser, such as server-side rendering or web workers.

Renderer2 is an Angular service that provides a safe and portable way to interact with the DOM. It abstracts away the native DOM API, allowing Angular to render applications in different environments without relying on browser-specific APIs.

Why Use Renderer2?

• Platform Agnostic: Allows your code to work in different environments (browser, server, etc.).
• Security: Protects against potential security vulnerabilities by avoiding direct DOM manipulation.
• Testability: Makes your code easier to test, as you can mock the Renderer2 service.

Using Renderer2

To use Renderer2, you need to inject it into your component or directive's constructor.

Example 1: Setting Element Styles

In this example, we'll use Renderer2 to set the background color of an element.

Component (style-example.component.ts)

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

    @Component({
      selector: 'app-style-example',
      template: '<div #myDiv>Hello, Renderer2!</div>'
    })
    export class StyleExampleComponent implements AfterViewInit {
      @ViewChild('myDiv') myDiv: ElementRef;

      constructor(private renderer: Renderer2) {}

      ngAfterViewInit(): void {
        this.renderer.setStyle(this.myDiv.nativeElement, 'backgroundColor', 'lightblue');
      }
    }
    

Explanation:

• constructor(private renderer: Renderer2): Injects the Renderer2 service.
• @ViewChild('myDiv') myDiv: ElementRef;: Gets a reference to the div element.
• this.renderer.setStyle(this.myDiv.nativeElement, 'backgroundColor', 'lightblue');: Sets the background color of the element using Renderer2.

Example 2: Adding a Class to an Element

In this example, we'll use Renderer2 to add a CSS class to an element.

Component (class-example.component.ts)

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

    @Component({
      selector: 'app-class-example',
      template: '<div #myDiv>Hello, Renderer2!</div>'
    })
    export class ClassExampleComponent implements AfterViewInit {
      @ViewChild('myDiv') myDiv: ElementRef;

      constructor(private renderer: Renderer2) {}

      ngAfterViewInit(): void {
        this.renderer.addClass(this.myDiv.nativeElement, 'highlight');
      }
    }
    

CSS (class-example.component.css)

    .highlight {
      border: 2px solid red;
    }
    

Explanation:

• this.renderer.addClass(this.myDiv.nativeElement, 'highlight');: Adds the highlight class to the element using Renderer2.
• The CSS defines the highlight class, which adds a red border.

Example 3: Creating a New Element

In this example, we'll use Renderer2 to create a new element and append it to the DOM.

Component (create-element.component.ts)

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

    @Component({
      selector: 'app-create-element',
      template: '<div #container></div>'
    })
    export class CreateElementComponent implements AfterViewInit {
      @ViewChild('container') container: ElementRef;

      constructor(private renderer: Renderer2) {}

      ngAfterViewInit(): void {
        const newElement = this.renderer.createElement('p');
        const text = this.renderer.createText('New paragraph created with Renderer2!');
        this.renderer.appendChild(newElement, text);
        this.renderer.appendChild(this.container.nativeElement, newElement);
      }
    }
    

Explanation:

• this.renderer.createElement('p');: Creates a new p element.
• this.renderer.createText('New paragraph created with Renderer2!');: Creates a text node.
• this.renderer.appendChild(newElement, text);: Appends the text node to the new element.
• this.renderer.appendChild(this.container.nativeElement, newElement);: Appends the new element to the container.

Key Points

• Renderer2 provides a platform-agnostic way to manipulate the DOM.
• It should be used instead of directly accessing the native DOM.
• It improves security and testability.

If you have any questions, feel free to ask. Thank you for reading!