This page looks best with JavaScript enabled

Stop Using ElementRef! For DOM Manipulation In Angular

 ·  β˜• 3 min read  ·  ✍️ Adesh

ElementRef: Easy but unsafe way of DOM Manipulation

One of the common way of manipulating DOM is using ElementRef.

ElementRef is a wrapper around a native element inside of a view.

For example, let’s see, how to use ElementRef to change the color of an element by using the color directive.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appColor]'
})
export class ColorDirective implements OnInit {

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
    this.el.nativeElement.style.color = 'green';
  }

}

In most common use cases of manipulating DOM is using directive and using the nativeElement property. Here, you can see, we have set the color to green. It will change the color of the element, where this directive will be applied. That’s cool!, but it is not safe as per Angular docs. See (ElementRef: Security Risk)

Security Risk

As per Angular docs, ElementRef has direct access to DOM, and it makes your application more vulnerable to XSS attacks. Use this, when you have no option left to access the DOM element.

Also, 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.

Renderer2: Safer way of DOM Manipulation

The Renderer2 class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach because it then makes it easier to develop apps that can be rendered in environments that don’t have DOM access, like on the server, in a web worker or on native mobile.

Let’s modify our above example now by using Renderer2 and make our app safer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appColor]'
})
export class ColorDirective implements OnInit {

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

  ngOnInit() {
     this.renderer.setStyle(this.el.nativeElement, 'color', 'green');
  }

}

And everything will work as expected. You can read more about Renderer2 by clicking on below link.

Angular Renderer2

Summary

So, in this blog, we see why shouldn’t we use ElementRef for DOM manipulation. Using Renderer2 is safer way of DOM manipulation than ElementRef.

Further Reading

Angular Material Table With Paging, Sorting And Filtering

ng-template, ng-container And ngTemplateOutlet In Angular

Learn About Observables, Observers And Operators of RxJS – Angular

Share on

Adesh
WRITTEN BY
Adesh
Technical Architect