ngAfterContentChecked 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, AfterContentChecked } 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")
  }
  ngAfterContentChecked(){
    console.log("after content checked")
  }
  clickMe(){
    console.log("link clicked")
  }
}

ngAfterContentChecked() is called directly after ngAfterContentInit

ngAfterContentChecked() is called after every subsequent ngDoCheck

In the above example, ngAfterContentChecked() gets called after ngDoCheck. ngAfterContentChecked() will also get called anytime the clickMe() function is triggered.

When should you use ngAfterContentChecked?

Use ngAfterContentChecked whenever you want to call a lifecycle event hook immediately after ngDoCheck.

ngAfterContentChecked can be useful if you want to implement additional initialization tasks after Angular has fully initialized the component/directive's content.

You might also like: