DOM Manipulation Using the Angular 7-8 Renderer2 with Examples

How to use the Angular 7 and 8 Renderer2 class for manipulating the DOM elements easily instead of the ElementRef

manipulating dom with angular 7 8 renderer2Today I want to share a recent discovery with you, stop accessing the DOM directly using Angular ElementRef and opt for the Angular Renderer2 approach for manipulating the DOM easily. In this article we will cover why it is better to use Angular 7 Renderer2 then we will see how to work with the Angular Renderer service class for manipulating DOM elements using straightforward examples.

Overview

The Renderer2 class is an out of the box feature from Angular which provides an abstraction for manipulating UI rendering elements of your app at runtime without the need to access the DOM directly. This is the best approach to consider because of some security reasons like XSS Attacks and also to be able to develop apps that can be rendered on various platforms that don’t have direct DOM access, like servers, web workers or native mobile.

With the help of the Angular 7 Renderer2 service class you can perform simple DOM manipulations as well as complex one.

Using Renderer2 class, you can add and remove CSS classes, styles, HTML attributes. It can be used to append or remove a child element within a parent element with Angular 7 Renderer2 class. You can add HTML comment to any parent element of the DOM easily. You can make elements listen to some defined events.

Let’s jump to the examples to make things more clear and understand with details the beauty of the Angular 7 and 8 Renderer2 service class.

Bad Approach to Follow

Before we jump to the Renderer2 examples, let’s first see a vulnerable method of manipulating the DOM elements of your app which you should avoid.

This approach is based on the ElementRef provided by @angular/core to directly access elements and manipulate the DOM with Angular.

If you choose directives for manipulating DOM, you will most likely use the nativeElement directly as follow:


import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
 selector: '[textDanger]'
})
export class textDangerDirective implements OnInit {

 constructor(private elRef: ElementRef) { }

 ngOnInit() {
  this.elRef.nativeElement.style.color = 'red';
 }
}

What Angular docs says about ElementRef :

Use this API as the last resort when direct access to DOM is needed. Permitting direct access to the DOM can make your application more vulnerable to XSS attacks. Carefully review any use of ElementRef in your code. Use templating and data-binding provided by Angular instead. Alternatively you can take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported.
Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.

How to Use Angular Renderer for DOM Manipulation

It is more convenient to use Renderer2 in custom directives because of how Angular directives are the main logical building block responsible for modifying elements.

Here we will provide a simple example of using setStyle() method from Renderer2 service to change the CSS color property of elements having  the custom directive from the previous bad example.

Use this command to generate the custom directive.

ng generate directive textDanger

Then, in text-danger.directive.ts add this.


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

@Directive({
  selector: '[appTextDanger]'
})
export class textDangerDirective implements OnInit {
  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnInit() {
    this.renderer.setStyle(this.elRef.nativeElement, 'color','red');
  }
}

Then, you will need to add this directive to any of your template elements and the red color property will be applied when rendered as following.


<h1 appTextDanger>
  Hello World!
</h1>

You can notice how simple and clean it is to manipulate DOM through the Angular Renderer2 service rather than accessing DOM elements directly. Now let’s have a look at some other useful methods below.

createElement / appendChild / createText

This allow to append the new created DOM elements inside any existing elements. Here in this example we will create a li element and a text node. Then, we put the text node inside our newly created li and finally the li element will be appended to the element having our directive which is the ul tag element.


constructor(private renderer: Renderer2, private elRef: ElementRef) {}

ngOnInit() {
  const li = this.renderer.createElement('li');
  const text = this.renderer.createText('New li element from renderer');

  this.renderer.appendChild(li, text);
  this.renderer.appendChild(this.elRef.nativeElement, li);
}

When the template is rendered and the directive is applied on the ul element we will get this as a result.


<ul>
  <li>New li element from renderer</li>
</ul>

setAttribute / removeAttribute

Use the setAttribute() and removeAttribute() from the Renderer2 service to set or remove an attribute from an element.


@Directive({ 
     selector: '[defaultValue]' 
})
export class DefaultInputValueDirective {
   constructor(private elRef: ElementRef, private renderer: Renderer2) {
   }
   @HostListener('mouseover') 
   onMouseOver() {
       this.renderer.setAttribute(this.elRef.nativeElement, 'value', 'Enter a Value');
   }
   @HostListener('mouseleave') 
   onMouseLeave() {
       this.renderer.removeAttribute(this.elRef.nativeElement, 'value');
   }   
} 

When the directive is applied on an input you will get this source code in DOM on mouse over.


<input type="text" value="Enter a Value ">

addClass / removeClass

The addClass() and removeClass() are both used to add a CSS class to an element or remove it. Let’s see the following example that allows the highlighting of a text using the hl-text CSS class.


@Directive({ 
     selector: '[hlOnMouseOver]' 
})
export class HlOnMouseOverDirective {
   constructor(private elRef: ElementRef, private renderer: Renderer2) {
   }
   @HostListener('mouseover') 
   onMouseOver() {
       this.renderer.addClass(this.elRef.nativeElement, 'hl-text');
   }
   @HostListener('mouseleave') 
   onMouseLeave() {
       this.renderer.removeClass(this.elRef.nativeElement, 'hl-text');
   }   
}

On mouse over the CSS class will be applied to the element having this directive and when the template is rendered you will get this source code.


<div class="hl-text"> Highlighted Text ! </div>

setStyle / removeStyle

We have already covered the setStyle() method in the above example. For the removeStyle() you will have to provide the element from which you want to remove the specified style.


@Directive({
  selector: '[removeTextDanger]'
})
export class removeTextDangerDirective implements OnInit {
  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnInit() {
    this.renderer.removeStyle(this.elRef.nativeElement, 'color','red');
  }
}

removeChild

It removes a child element within a parent element. All you need to do is providing the parent element and the child you want to remove from DOM.


@Directive({ 
     selector: '[removeChild]' 
})
export class RemoveChildDirective {
   constructor(private elRef: ElementRef, private renderer: Renderer2) {
   }
   p = this.renderer.createElement('p');
   text = this.renderer.createText('Hello World !');
   
   @HostListener('mouseover') 
   onMouseOver() {
       this.renderer.appendChild(this.p, this.text);  
       this.renderer.appendChild(this.elRef.nativeElement, this.p);
   }
   @HostListener('mouseleave') 
   onMouseLeave() {
       this.renderer.removeChild(this.elRef.nativeElement, this.p);
   }   
}

On mouse over, the p element will be added as a child to the element having this directive and removed on mouse leave.

setProperty

The setProperty() allows to set a property with a value to an element. As an example you can use the following code to add the alt property to an image element from DOM.


@Directive({ 
     selector: '[imgAlt]' 
})
export class ImageAltdDirective {
   constructor(private renderer: Renderer2, private elRef: ElementRef) {}

   ngOnInit() {
     this.renderer.setProperty(this.elRef.nativeElement, 'alt', 'image description');
   }

}

Takeaway

In this article we have shown step by step through some clear examples the basic usage of the Angular 7 and 8 Renderer2 class and how it is simple to manipulate the DOM elements using Renderer2 service class rather than the ElementRef.

To conclude, stop using the the ElementRef and use the angular Renderer from now on.

Refer to the API documentation to know more about the Rendere2 available methods.

Hope you ❤️ enjoyed reading this article, and if so, please share it with your friends.😀

Name

Angular,7,Angular 8,1,Best Practices,1,Design,1,Firebase,1,Ionic,1,Java,5,Nodejs,2,Python,1,Restful API,1,Software Development,1,Spring,3,Spring Batch,1,Spring Boot 2,1,Web Development,1,
ltr
item
Programming Tutorials, News and Reviews: DOM Manipulation Using the Angular 7-8 Renderer2 with Examples
DOM Manipulation Using the Angular 7-8 Renderer2 with Examples
How to use the Angular 7 and 8 Renderer2 class for manipulating the DOM elements easily instead of the ElementRef
https://3.bp.blogspot.com/-_Hy1OTIz8wA/XK0_z5aGa5I/AAAAAAAAAPo/fPV_PPC-kvASO4QQpcy2BlVkudmR8fR4QCLcBGAs/s200/manipulating-dom-angular-renderer2.jpg
https://3.bp.blogspot.com/-_Hy1OTIz8wA/XK0_z5aGa5I/AAAAAAAAAPo/fPV_PPC-kvASO4QQpcy2BlVkudmR8fR4QCLcBGAs/s72-c/manipulating-dom-angular-renderer2.jpg
Programming Tutorials, News and Reviews
https://www.ninjadevcorner.com/2019/04/dom-manipulation-using-angular-renderer2.html
https://www.ninjadevcorner.com/
https://www.ninjadevcorner.com/
https://www.ninjadevcorner.com/2019/04/dom-manipulation-using-angular-renderer2.html
true
493653397416713395
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy