Angular: ngAfterContentChecked

Tejas — Wed, 04 Jun 2025 17:08:34 +0000

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.

RxJs: withLatestFrom

Tejas — Fri, 10 Sep 2021 16:22:37 +0000

Hi all, in this post we will learn how to use RxJs withLatestFrom operator.

Let's say we have 2 observables bs1, bs2. We are interested in getting notified whenever bs1 streams any data. Also, we want to consider latest value streamed by bs2 whenever bs1 streams data. In this case we can make use of withLatestFrom.

We subscribe to bs1 & use withLatestFrom(bs2).

Use this stackBlitz link to get an example: https://stackblitz.com/edit/rxjs-uhrmor?devtoolsheight=60
You need to observe the console logs to understand the use of withLatestFrom.

I hope this helps.

Thanks!!

DEV Community: Tejas

Angular: ngAfterContentChecked

Angular lifecycle hook - ngAfterContentChecked

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

RxJs: withLatestFrom

Angular lifecycle hook - `ngAfterContentChecked`