Today, I am going to write on a small but important topic of DOM manipulation. DOM manipulation is much easier in all versions of Angular 2. Angular abstract the DOM and gives you the shallow copy to mess around it. It becomes more interesting with TypeScript because your editor can hint most of the DOM property method for you.

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 us see how to use ElementRef to change the color of an element by using the color directive.

import Directive ElementRef OnInit from angularts core

Directive selector appColor export class ColorDirective implements OnInit constructor private el ElementRef ngOnInit thiselnativeElementstylecolor 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 is 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 do not have DOM access like on the server in a web worker or on native mobile.

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

import Directive ElementRef OnInit Renderer2 from angularts core

Directive selector appColor export class ColorDirective implements OnInit constructor private el ElementRef private renderer Renderer2 ngOnInit thisrenderersetStyle thiselnativeElement 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 should not 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

ngtemplate ngcontainer And ngTemplateOutlet In Angular

Learn About Observables Observers And Operators of RxJS Angular