Angular ngAfterViewInit()
May 07, 2019
Angular ngAfterViewInit()
is the method of AfterViewInit
interface. ngAfterViewInit()
is a lifecycle hook that is called after Angular has fully initialized a component's views. ngAfterViewInit()
is used to handle any additional initialization tasks. Find the AfterViewInit
interface code from Angular doc.
interface AfterViewInit { ngAfterViewInit(): void }
ngAfterViewInit()
is used to access properties annotated with @ViewChild()
and @ViewChildren()
decorators. Here on this page we will discuss ngAfterViewInit()
lifecycle hook with examples.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 7.0.0
2. Angular CLI 7.0.3
3. TypeScript 3.1.1
4. Node.js 10.3.0
5. NPM 6.1.0
Using ngAfterViewInit()
Find the simple example that usesngAfterViewInit()
lifecycle hook.
afterviewinit-demo.component.ts
import { Component, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-afterviewinit', template: ` <h3>ngAfterViewInit() Demo</h3> ` }) export class AfterViewInitDemoComponent implements AfterViewInit { ngAfterViewInit() { console.log("---ngAfterViewInit() Demo---"); } }
AfterViewInit
interface. Angular looks for only ngAfterViewInit()
method name to run this lifecycle hook. Implementing interfaces are optional because JavaScript language doesn't have interfaces and Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript. But it is good practice to add interfaces to TypeScript directive classes in order to benefit from strong typing and editor tooling.
ngAfterViewInit() in Angular Lifecycle Hooks
ngAfterViewInit()
is executed after Angular initializes the component's views and child views. The child view is the view that a directive is in. ngAfterViewInit()
is executed only once after the first call of ngAfterContentChecked()
life cycle hook. After ngAfterViewInit()
lifecycle hook, the ngAfterViewChecked()
is called. ngAfterContentChecked()
responds after Angular checks the content projected into the directive/component and ngAfterViewChecked()
responds after Angular checks the component's views and child views.
Find the complete lifecycle hooks of angular and their sequences to execute.
lifecycle-hook.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-lifecycle-hook', template: ` <h3>Lifecycle Hook Demo</h3> ` }) export class LifecycleHookComponent { constructor() { console.log("---constructor---"); } ngOnInit() { console.log("---Inside ngOnInit---"); } ngDoCheck() { console.log("---Inside ngDoCheck---"); } ngAfterContentInit() { console.log("---Inside ngAfterContentInit---"); } ngAfterContentChecked() { console.log("---Inside ngAfterContentChecked---"); } ngAfterViewInit() { console.log("---Inside ngAfterViewInit---"); } ngAfterViewChecked() { console.log("---Inside ngAfterViewChecked---"); } ngOnDestroy() { console.log("---Inside ngOnDestroy---"); } }
---constructor--- ---Inside ngOnInit--- ---Inside ngDoCheck--- ---Inside ngAfterContentInit--- ---Inside ngAfterContentChecked--- ---Inside ngAfterViewInit--- ---Inside ngAfterViewChecked---
ngAfterViewInit
can be used with @ViewChild()
and @ViewChildren()
properties. ngAfterContentInit()
can be used with @ContentChild
and @ContentChildren
properties. Angular has one more lifecycle hook i.e. ngOnChanges()
which responds when Angular sets or resets data-bound @Input()
properties.
ngAfterViewInit() Example with @ViewChild() and @ViewChildren()
Here we will create a demo in whichngAfterViewInit()
will access @ViewChild()
and @ViewChildren()
properties in our component.
message.directive.ts
import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[cpMsg]' }) export class MessageDirective { constructor(public viewContainerRef: ViewContainerRef) { } }
import { Component, ViewChild, ViewChildren, AfterViewInit, TemplateRef, QueryList } from '@angular/core'; import { MessageDirective } from './message.directive'; @Component({ selector: 'app-message', template: ` <h3>@ViewChildren() and @ViewChild()</h3> <div cpMsg></div> <div cpMsg></div> <div cpMsg></div> <ng-template #msgTemp> Namaste! </ng-template> ` }) export class MessageComponent implements AfterViewInit { @ViewChildren(MessageDirective) private msgList: QueryList<MessageDirective>; @ViewChild('msgTemp') private msgTempRef: TemplateRef<any>; ngAfterViewInit() { console.log("this.msgList.length: " + this.msgList.length); this.msgList.forEach(messageDirective => messageDirective.viewContainerRef.createEmbeddedView(this.msgTempRef)); } }
ngAfterViewInit()
responds when the component's view and its child view is initialized, so here inside this method we are reading the msgTemp
template data and embedding it into the cpMsg
directive.
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-afterviewinit></app-afterviewinit> <app-lifecycle-hook></app-lifecycle-hook> <app-message></app-message> ` }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AfterViewInitDemoComponent } from './afterviewinit-demo.component'; import { LifecycleHookComponent } from './lifecycle-hook.component'; import { MessageComponent } from './message.component'; import { MessageDirective } from './message.directive'; @NgModule({ imports: [ BrowserModule, ], declarations: [ AppComponent, AfterViewInitDemoComponent, LifecycleHookComponent, MessageComponent, MessageDirective ], providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.

References
Angular AfterViewInitAngular Lifecycle Hooks