ngAfterViewChecked Example | Angular

Last modified: April 22, 2019

ngOnChanges Example

ngOnInit Example

ngDoCheck Example

ngAfterContentInit Example

ngAfterContentChecked Example

ngAfterViewInit Example

ngAfterViewChecked Example

ngOnDestroy Example

import { Component, OnInit, DoCheck, AfterViewChecked} from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<a (click)="clickMe()">Click me</a>`,
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log("onInit called")
  }
  ngDoCheck(){
    console.log("do check")
  }
  ngAfterViewChecked(){
    console.log("after view checked")
  }
  clickMe(){
    console.log("link clicked")
  }
}

ngAfterViewChecked() is called after ngAfterContentInit

ngAfterViewChecked() is called after every subsequent ngAfterContentChecked.

Triggering the clickMe() function will trigger ngAfterViewChecked().

When should you use ngAfterViewChecked?

ngAfterViewChecked is useful when you want to call a lifecycle hook after all child components have been initialized and checked.

You might also like: