Using Renderer2 in Angular
Tags: angular
Published: 2023-02-21 03:57:57

In Angular, **`Renderer2`** is a class that provides a way to manipulate the DOM (Document Object Model) in a way that is safe and efficient.

In Angular, **`Renderer2`** is a class that provides a way to manipulate the DOM (Document Object Model) in a way that is safe and efficient. It's a low-level API that abstracts away the differences between browsers and provides a platform-independent way to manipulate the DOM.

**`Renderer2`** provides a set of methods that you can use to create, modify, and remove DOM elements, as well as to set and remove attributes, styles, and event listeners. By using **`Renderer2`**, you can manipulate the DOM in a way that is safe and efficient, and that works seamlessly with Angular's change detection mechanism.

It's important to use **`Renderer2`** methods to manipulate the DOM in Angular, rather than using the native DOM API directly.

Here's a brief explanation of how to use **`Renderer2`**:

**1) Inject Renderer2:** To use **`Renderer2`**, you need to inject it into your component or service. You can do this by adding it as a parameter in the constructor:
    
    
    import { Component, Renderer2 } from '@angular/core';
    
    @Component({
      selector: 'my-component',
      template: '<div #myDiv></div>',
    })
    export class MyComponent {
      constructor(private renderer: Renderer2) {}
    }
    


**2) Use Renderer2 methods:** Once you have the **`Renderer2`** instance, you can use its methods to manipulate the DOM. For example, you can create a new element and append it to an existing element:
    
    
    const newElement = this.renderer.createElement('div');
    const existingElement = this.renderer.selectRootElement('#myDiv');
    this.renderer.appendChild(existingElement, newElement);
    
    
    
In above example, we're creating a new **`div`** element using the **`createElement`** method. Then, we're selecting the existing **`div`** element with the **`selectRootElement`** method, and appending the new element to it using the **`appendChild`** method.
    
You can also use other methods of **`Renderer2`** to manipulate the DOM, such as **`setAttribute`**, **`removeClass`**, **`setStyle`**, and so on.

Methods provided by the **`Renderer2`** class in Angular
    
   Here are some of the methods provided by the **`Renderer2`** class in Angular:

1. **`createElement(name: string, namespace?: string): any`**: This method creates a new element with the given tag name and namespace (giving namespace to createElement method is optional).

2. **`createText(text: string): any`**: This method will create a new text node with the given text content.

3. **`appendChild(parent: any, newChild: any): void`**: This method will append a child node to the end of the parent node.

4. **`removeChild(parent: any, oldChild: any): void`**: This method will remove a child node from the parent node.

5. **`selectRootElement(selectorOrNode: string | any): any`**: This method will find the root element of a view using a selector string or a node reference.

6. **`setAttribute(el: any, name: string, value: string, namespace?: string): void`**: This method will set an attribute value for an element.

7. **`removeAttribute(el: any, name: string, namespace?: string): void`**: This method will remove an attribute from an element.

8. **`addClass(el: any, name: string): void`**: This method will add a CSS class to an element.

9. **`removeClass(el: any, name: string): void`**: This method will remove a CSS class from an element.

10. **`setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void`**: This method will set a CSS style property for an element.

11. **`removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void`**: This method will remove a CSS style property from an element.

12. **`setProperty(el: any, name: string, value: any): void`**: This method will set a property value for an element.

13. **`listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void`**: This method will register an event listener for a DOM element.

These are just some of the methods provided by **`Renderer2`**. There are many more methods that you can use to manipulate the DOM in a safe and efficient way in your Angular application.