What is ngAfterViewInit with Example - Angular ?

This tutorial guides you on what is ngAfterViewInit and why should we use ngAfterViewInit lifecycle hook in Angular.

What is ngAfterViewInit ?

ngAfterViewInit() is a callback method which will get called by Angular immediately after it has completed initialization of component’s view. It will be invoked only once when the view is instantiated.

And ngAfterViewInit() lifecycle hook will get called after the following lifecycle hooks get invoked.

ngOnChanges() – Invoked after a bound input property changes.
ngOnInit – Invoked once the component is initialized.
ngDoCheck – Invoked after every change detection run
ngAfterContentInit – Invoked after content (ng-content) has been projected into view.
ngAfterContentChecked – Invoked every time after the projected content has been checked.

ngAfterViewInit(): void

Parameters
There are no parameters.

Returns
void

Why should we use ngAfterViewInit in Angular ?

AfterViewInit is a lifecycle hook that will be called after Angular has initialized component’s view completely. You can define an ngAfterViewInit() method in your component to handle any additional initialization tasks.

interface AfterViewInit {

  ngAfterViewInit(): void

}

The following sneppet shows how to implement the above interface in your component to define your own content initialization method.

import { 
  AfterViewInit,
  AfterContentInit,
  Component, 
  DoCheck, 
  Input, 
  OnChanges, 
  OnInit, 
  SimpleChanges
} 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, AfterViewInit{

  @Input() itemElem : {type: string, title: string, desc: string, spec: string};
  @Input() title : string;
  
  constructor() {
    console.log("constructor called.....");
  }

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

  ngOnInit(): void {
    console.log("ngOnInit called.....");
  }

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

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

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

}

Finally, when you inspect and go to console via Google chrome browser tools you can see the following logs in the console.

item-element.component.ts:35 constructor called.....
item-element.component.ts:39 ngOnChanges called.....
item-element.component.ts:44 ngOnInit called.....
item-element.component.ts:48 ngDoCheck called.....
item-element.component.ts:52 ngAfterContentInit called.....
item-element.component.ts:56 ngAfterViewInit called.....
item-element.component.ts:39

That’s it. You had learnt what is ngAfterViewInit lifecycle hook and when we should use ngAfterViewInit in Angular.

Hope it helped 🙂

Also See:

What is ngAfterViewInit with Example – Angular ?

What is ngAfterViewInit ?

Why should we use ngAfterViewInit in Angular ?

References: