Angular Component : In which lifecycle hook you can check value of DOM element ?

This tutorial guides you on in which lifecycle hook you check value of some element of DOM in the Angular component.

Angular Component: In which lifecycle hook you can check value of DOM element

Let’s say you wanted to access the heading element value of the following template. That is, value of the title.

item-element.component.html

<div
class="panel panel-default">
<div class="panel-heading">{{ title }}</div>
<div class="panel-body">
  <ng-content></ng-content>
</div>
</div>

Let’s see in which lifecycle hook you can access the above template element value. For example, let’s use @ViewChild to get access to the template element in our example code. And to get access to the heading let’s use some template reference “#heading” as shown below.

<div
class="panel panel-default">
<div class="panel-heading" #heading>{{ title }}</div>
<div class="panel-body">
  <ng-content></ng-content>
</div>
</div>

And your component class code will look like below with @ViewChild changes to access the DOM or template element.

item-element.component.ts

import { 
  AfterViewChecked,
  AfterViewInit,
  AfterContentChecked,
  AfterContentInit,
  Component, 
  DoCheck, 
  Input, 
  OnChanges, 
  OnInit, 
  SimpleChanges,
  OnDestroy,
  ViewChild,
  ElementRef
} from '@angular/core';

@Component({
  selector: 'app-item-element',
  templateUrl: './item-element.component.html',
  styleUrls: ['./item-element.component.css'],

})

export class ItemElementComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy{

  @Input() itemElem : {type: string, title: string, desc: string, spec: string};
  @Input() title : string;
  @ViewChild('heading', {static: true}) header : ElementRef;

  constructor() {
    console.log("constructor called.....");
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log("ngOnChanges called.....");
    console.log(changes);
  }

  ngOnInit(): void {
    console.log("ngOnInit called.....");
    console.log('Header Content:' + this.header.nativeElement.textContent);
  }

  ngDoCheck(){
    console.log("ngDoCheck called.....");
  }

  ngAfterContentInit(){
    console.log("ngAfterContentInit called.....");
  }

  ngAfterContentChecked(){
    console.log("ngAfterContentChecked called.....");
  }

  ngAfterViewInit(){
    console.log("ngAfterViewInit called.....");
    console.log('Header Content::::::' + this.header.nativeElement.textContent);
  }

  ngAfterViewChecked(){
    console.log("ngAfterViewChecked called.....");
  }

  ngOnDestroy(){
    console.log("ngOnDestroy called.....");
  }

}

Note, I have added the following logs console.log(‘Header Content::::::’ + this.header.nativeElement.textContent); in the following lifecycle hooks methods. Therefore, you can check in which lifecycle you will be able to access the DOM element’s value.

  //ngOnInit
  ngOnInit(): void {
    console.log("ngOnInit called.....");
    console.log('Header Content:' + this.header.nativeElement.textContent);
  }

  //After the view is initialized
  ngAfterViewInit(){
    console.log("ngAfterViewInit called.....");
    console.log('Header Content::::::' + this.header.nativeElement.textContent);
  }

Finally, when you run the above code changes, you can observe from the console logs that while ngOnInit() lifecycle hook is invoked, element value is empty. But when you check after view is initialized i.e., after ngAfterViewInit() is invoked, you could get access to the template elements.

item-element.component.ts:40 constructor called.....
item-element.component.ts:45 ngOnChanges called.....
item-element.component.ts:46 {itemElem: SimpleChange, title: SimpleChange}
item-element.component.ts:50 ngOnInit called..... *************************************
item-element.component.ts:51 Header Content:      *************************************
item-element.component.ts:55 ngDoCheck called.....
item-element.component.ts:59 ngAfterContentInit called.....
item-element.component.ts:63 ngAfterContentChecked called.....
item-element.component.ts:67 ngAfterViewInit called..... *******************************
item-element.component.ts:68 Header Content::::::Google Pixel **************************
item-element.component.ts:72 ngAfterViewChecked called.....
item-element.component.ts:45 ngOnChanges called.....
item-element.component.ts:46 {itemElem: SimpleChange, title: SimpleChange}
item-element.component.ts:50 ngOnInit called.....  *************************************
item-element.component.ts:51 Header Content:       *************************************
item-element.component.ts:55 ngDoCheck called.....
item-element.component.ts:59 ngAfterContentInit called.....
item-element.component.ts:63 ngAfterContentChecked called.....
item-element.component.ts:67 ngAfterViewInit called.....  *******************************
item-element.component.ts:68 Header Content::::::Specifications *************************
item-element.component.ts:72 ngAfterViewChecked called.....
core.js:27546 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
item-element.component.ts:55 ngDoCheck called.....
item-element.component.ts:63 ngAfterContentChecked called.....
item-element.component.ts:72 ngAfterViewChecked called.....
item-element.component.ts:55 ngDoCheck called.....
item-element.component.ts:63 ngAfterContentChecked called.....
item-element.component.ts:72 ngAfterViewChecked called.....
client:52 [WDS] Live Reloading enabled.

Therefore, before the hook ngAfterViewInit() is reached, you can’t access template elements. That is, you can’t check some value of the DOM element, because it is not been rendered yet.

Hope it helped 🙂

Also See:

Angular Component: In which lifecycle hook you can check value of DOM element

References: