What is ngAfterContentChecked with Example - Angular ?

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

What is ngAfterContentChecked ?

ngAfterContentChecked() is a callback method which will get called by Angular immediately after the default change detector completes checking all of the directive’s content.

And ngAfterContentChecked() 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.

Therefore, we can say this lifecycle hook will get invoked everytime the projected content (ng-content) has been checked.

ngAfterContentChecked(): void

Parameters
There are no parameters.

Returns
void

Why should we use ngAfterContentChecked in Angular ?

AfterContentChecked is a lifecycle hook that will be called after Angular has checked all of the contents of a directive completely, right after default change detector change-detection cycle. You can define an ngAfterContentChecked() method in your component class to define its own after-check functionality.

interface AfterContentChecked{

  ngAfterContentChecked(): void

}

For example, the following sneppet shows how to implement the above interface in your component to define its own after-check functionality.

import { 
  AfterViewChecked,
  AfterViewInit,
  AfterContentChecked,
  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, AfterContentChecked, AfterViewInit, AfterViewChecked {

  @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.....");
  }

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

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

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

}

Finally, when you inspect and go to console via Google chrome browser tools you can see the following logs in the console. Note, ngViewInit() and ngAfterViewChecked() lifecycle hooks get called after content has been checked i.e., after ngAfterContentChecked.

item-element.component.ts:36 constructor called.....
item-element.component.ts:40 ngOnChanges called.....
item-element.component.ts:45 ngOnInit called.....
item-element.component.ts:49 ngDoCheck called.....
item-element.component.ts:53 ngAfterContentInit called.....
item-element.component.ts:57 ngAfterContentChecked called.....
item-element.component.ts:61 ngAfterViewInit called.....
item-element.component.ts:65 ngAfterViewChecked called.....
......
......

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

Hope it helped 🙂

Also See:

What is ngAfterContentChecked with Example – Angular ?

What is ngAfterContentChecked ?

Why should we use ngAfterContentChecked in Angular ?

References: