ElementRef in Angular | How to use it

Angular ElementRef is a wrapper around a native DOM element (HTML element) object. It contains the property nativeElement, which holds the reference to the underlying DOM object. We can use it to manipulate the DOM. We use the ViewChild to get the ElementRef of an HTML element in the component class. Angular also inject ElementRef of the Host element of the component or directive when you request for it in the constructor. In this tutorial, let us explore how to use ElementRef to get the reference of an HtmlElement & manipulate the DOM in Angular Applications.

*Table Of Content: *

1. ElementRef
2. Getting ElementRef in Component Class
3. ElementRef Example
4. ElementRef in Custom Directive
5. ElementRef & XSS Injection Attack
6. Refrence

ElementRef

The DOM objects are created and maintained by the Browser. They represent the structure and content of the Document. In a Vanilla JavaScript code, we access these DOM objects to manipulate the View. We can create and build documents, navigate their structure, and add, modify, or delete elements and content.

Angular provides a lot of tools & techniques to manipulate the DOM. We can add/remove components. It provides a lot of directives like Class Directive or Style directive. to Manipulate their styles etc.

We may still need to access the DOM element on some occasions. This is where the ElementRef comes into the picture.

Getting ElementRef in Component Class

To manipulate the DOM using the ElementRef, we need to get the reference to the DOM element in the component/directive.

embed To get the reference to DOM elements in the component

1. Create a template reference variable for the element in the component/directive.
2. Use the template variable to inject the element into component class using the ViewChild or ViewChildren.

To get the DOM element hosting the component/directive

1. Ask for ElementRef in the constructor (Angular Dependency injection), the Angular will inject the reference element hosting the component/directive. For Example, in the following code, the variable hello refers to the HTML element div.

<div #hello>Hello Angular</div>

hello is the Template Reference variable, which we can use in the Template.

In the Component class, we use the ViewChild to inject the hello element. The Angular injects the hello as a type of ElementRef.

@ViewChild('hello', { static: false }) divHello: ElementRef;

Read token

Consider the following example

<input #nameInput [(ngModel)]="name">

The nameInput Template Reference Variable now binds to the input element. But at the same time, we have ngModel directive applied to it.

Under such circumstance, we can use the read token to let angular know that we need ElementRef reference as shown below

//ViewChild returns ElementRef i.e. input HTML Element

@ViewChild('nameInput',{static:false, read: ElementRef}) elRef;


//ViewChild returns NgModel associated with the nameInput
@ViewChild('nameInput',{static:false, read: NgModel}) inRef;

ElementRef Example

Once we have the ElementRef , we can use the nativeElement property to manipulate the DOM as shown below.

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

@Component({
  selector: 'app-root',
  template:  '<div #hello>Hello</div>'
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

 @ViewChild('hello', { static: false }) divHello: ElementRef;

 ngAfterViewInit() {
   this.divHello.nativeElement.innerHTML = "Hello Angular";
 }

}

You can manipulate the DOM very easily.

  ngAfterViewInit() {
    this.divHello.nativeElement.innerHTML = "Hello Angular";
    this.divHello.nativeElement.className="someClass";
    this.divHello.nativeElement.style.backgroundColor="red";
  }

ElementRef in Custom Directive

One of the use case for ElementRef is the Angular directive. We learned how to create a custom directive in Angular. The following is the code for the ttClass custom attribute directive.

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

@Directive({
  selector: '[ttClass]',
})
export class ttClassDirective implements OnInit {

  @Input() ttClass: string;

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    this.el.nativeElement.classList.add(this.ttClass);
  }

}

Note that we are injecting the ElementRef in the constructor. Whenever we ask for the ElementRef in the constructor, the Angular will inject the reference to the host DOM element of the directive.

ElementRef & XSS Injection Attack

Improper use of ElementRef can result in an XSS Injection attack. For Example in the following code, we are injecting a script using the elementRef. When the component containing such code runs, the script is executed

constructor(private elementRef: ElementRef) {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.textContent = 'alert("Hello World")';
    this.elementRef.nativeElement.appendChild(s);
 }

Reference

ElementRef

If you liked this, click the ❤️ below so other people will see this here on Medium. Please don’t forget to like, subscribe and comments.