Angular: ngAfterContentChecked

Angular lifecycle hook - ngAfterContentChecked

In angular we can project content from parent component to child component using <ng-content>.

Whenever the projected content is initialized, then the ngAfterContentInit lifecycle hook gets executed in the child component.
And whenever there's any change in the projected content, the ngAfterContentChecked lifecycle hook gets executed in the child component.

---

Let's create a child component that

• displays the content projected by the parent component using <ng-content>
• implements the AfterCintentInit and AfterContentChecked classes and the methods ngAfterCintentInit and ngAfterCintentInit

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    <h3>Child component</h3>
    <p>Hello from child component</p>
    <p>Below is the content from parent component</p>
    <ng-content></ng-content>
  `,
})
export class ChildComponent implements AfterContentInit, AfterContentChecked {
  ngAfterContentInit() {
    console.log('ngAfterContentInit() is called in ChildComponent');
  }
  ngAfterContentChecked() {
    console.log('ngAfterContentChecked() is called in ChildComponent');
  }
}

Let's create a parent component that

• projects some content to the child component

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [ChildComponent, CommonModule],
  template: `
    <h3>Parent component</h3>
    <p>Hello from parent component</p>
    <app-child>
    <!-- This is the content that we project into the child component
      Parent component has control over it
      -->
      <span>This is the name in parent component which is projected into the child component = </span><span><b>{{counter$ | async}}</b></span>
    </app-child>
  `,
})
export class ParentComponent{
  counter$ = new BehaviorSubject<number>(1);
  constructor() {
    /**
     * We're setting 2500 ms timeout
     * After 2500 ms, the callback function is executed which pushes value into the BehaviorSubject
     * Since we're projecting this content (with updated name value) into the child, the ngAfterContentChecked() lifecycle hook will get executed in the child component
     */
    setInterval(() => this.counter$.next(+this.counter$.value + 1), 2500);
  }
}

Let's use this parent component into the root component of our angular app so that we can serve the app and see results

import 'zone.js';
import { Component, AfterContentInit, AfterContentChecked } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { BehaviorSubject } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ParentComponent],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <app-parent></app-parent>
  `,
})
export class App {}

bootstrapApplication(App);

The ngAfterContentChecked() method in the child component gets called each 2500ms because the content projected from the parent component is changing every 2500ms.

Here is the working example - https://stackblitz.com/edit/angular-fyaucn66?file=src%2Fmain.ts

Note

• Use the console on the bottom right in the stackblitz to see the console logs
• Sometimes the console output in the Stachblitz is random, do hit the refresh icon of the preview and it'll work fine.