Understanding Angular 8 ElementRef by Example

In this tutorial, we'll be seeing an example of ElementRef with Angular 8. We'll use the online Stackblitz development IDE, so you don't need to set up your development environment or create an Angular project for this quick example.

Visit the https://stackblitz.io/ website. If you don't have an account, you can simply use GitHub to quickly sign up then create a new Angular app.

What's ElementRef?

Before writing any code, let's see what's ElementRef is and what it's used for.

According to the official docs

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

It's simply a class that wraps native DOM elements in the browser and allows you to work with the DOM by providing the nativeElement object which exposes all the methods and properties of the native elements.

A Simple Example!

Let's now see a simple example for how to access the DOM using the ViewChild decorator combined with the ElementRef interface. Go back to your Angular application created in Stackblitz and open the the src/app/app.component.ts file. Next, add the following changes:

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular 8 by Example: ElementRef';

  @ViewChild("myDiv") divView: ElementRef;

  ngAfterViewInit(){

    console.log(this.divView);
    this.divView.nativeElement.innerHTML = "Hello Angular 8!";

  }

}

We simply import the AfterViewInit, ElementRef, ViewChild symbols. Next, we implement the AfterViewInit interface which provides our component with the ngAfterViewInit() life-cycle method that gets called after the view is intialized (This is important since we can query or modify the view only after it's intialized).

Next, we declare the divView component property and decorate it with @ViewChild() decorator which is used to create a DOM query configuration. Here, we create a query that looks for the element with the myDiv template reference.

The type of the divView variable is our ElementRef interface which means we can access the nativeElement object that reprents the DOM element in the browser.

After that, we add the ngAfterViewInit() life-cycle event and set the innerHTML of our <div> to Hello Angular 8!

This is equivalent to document.getElementById("myDiv").innerHTML = "Hello Angular 8!"; in plain JavaScript. Except that we use template reference variables instead of IDs in Angular.

We also printed the divView in the console. If you open the Stackblitz console, you'll see the properties of ElementRef:

Angular 8 ElementRef Example

To make our code works as in the screenshot, one thing left is adding a <div> with the myDiv reference in our component template. Open the src/app/app.component.html file and change as follows:

<hello  name=""></hello>

<div #myDiv>
</div>

Note: ElementRef allows direct access to the DOM which could risk your app to XSS attacks. There are other alternatives (templating, data binding and also the Renderer2 API) to directly access the DOM which will cover in other tutorials.

Conclusion

In this quick post, we've seen what ElementRef is and how It can be used with other APIs to access the native DOM elements with a simple Angular 8 example. You can see the live example from this link.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status