ngAfterContentChecked() is an Angular lifecycle hook that runs after Angular checks the content projected into a component.

Projected content normally means content passed from a parent component into a child component using:

<ng-content></ng-content>

Simple definition: ngAfterContentChecked() runs after Angular checks whether the component's projected content has changed.

Why Do We Need ngAfterContentChecked()?

We already learned:

ngAfterContentInit()
        ↓
Projected content initialized
        ↓
Runs ONCE

But projected content can be checked again during later change-detection cycles.

That's where:

ngAfterContentChecked()

comes in.

Projected content initialized
        ↓
ngAfterContentInit()        ← Once
        ↓
ngAfterContentChecked()     ← First check
        ↓
Change detection again
        ↓
ngAfterContentChecked()     ← Again
        ↓
Change detection again
        ↓
ngAfterContentChecked()     ← Again

So the most important difference is:

ngAfterContentInit() = once after content initialization.
ngAfterContentChecked() = after every subsequent content check, including the initial one.

Full Simple Sample Program

app.ts — Parent Component

import { Component } from '@angular/core';
import { CardComponent } from './card';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent],
  template: `
    <h2>Parent Component</h2>

    <button (click)="changeTitle()">
      Change Title
    </button>

    <app-card>
      <h3>{{ title }}</h3>
    </app-card>
  `
})
export class App {

  title = 'Welcome Syed';

  changeTitle() {
    this.title = 'Welcome Mohamed';
  }
}

card.ts — Child Component

import {
  AfterContentChecked,
  AfterContentInit,
  Component
} from '@angular/core';

@Component({
  selector: 'app-card',
  standalone: true,
  template: `
    <div>
      <h2>Child Component</h2>

      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent
  implements AfterContentInit, AfterContentChecked {

  ngAfterContentInit(): void {
    console.log('Content initialized');
  }

  ngAfterContentChecked(): void {
    console.log('Content checked');
  }
}

Explanation

The parent provides this content:

<app-card>
  <h3>{{ title }}</h3>
</app-card>

The child displays it using:

<ng-content></ng-content>

So:

Parent
  │
  │ provides
  ▼
<h3>{{ title }}</h3>
  │
  ▼
Child
  │
  ▼
<ng-content>

When the child is initially created:

Projected content initialized
        ↓
ngAfterContentInit()
        ↓
ngAfterContentChecked()

Console might show:

Content initialized
Content checked

Now Change the Content

When we click:

<button (click)="changeTitle()">

the parent executes:

this.title = 'Welcome Mohamed';

The projected content changes from:

Welcome Syed

to:

Welcome Mohamed

Angular performs change detection and checks the projected content.

After that check:

ngAfterContentChecked(): void {
  console.log('Content checked');
}

runs again.

Very Important Point

Don't think:

"ngAfterContentChecked() runs only when projected content actually changes."

That's not correct.

It runs whenever Angular performs the relevant content check during change detection, even if the content did not actually change.

For example:

ngAfterContentChecked(): void {
  console.log('Checked');
}

You may see:

Checked
Checked
Checked
Checked
...

because Angular can perform change detection many times.

ngAfterContentInit() vs ngAfterContentChecked()

This is the main interview difference.

Easy Example

Think about opening a shop.

ngAfterContentInit()
        ↓
Shop opened for first time
        ↓
ONE TIME

Whereas:

ngAfterContentChecked()
        ↓
Inspect the shop
        ↓
MANY TIMES

ngDoCheck() vs ngAfterContentChecked()

They can seem similar because both can execute frequently.

ngDoCheck()

Angular starts checking component
        ↓
ngDoCheck()
        ↓
You can perform custom checking

ngAfterContentChecked()

Angular checks projected content
        ↓
Check completed
        ↓
ngAfterContentChecked()

So:

ngDoCheck() → custom checking logic during change detection.

ngAfterContentChecked() → notification that projected content has been checked.

Lifecycle Order

A simplified order is:

ngOnChanges()
      ↓
ngOnInit()
      ↓
ngDoCheck()
      ↓
ngAfterContentInit()       ← Once
      ↓
ngAfterContentChecked()    ← Repeated
      ↓
ngAfterViewInit()          ← Once
      ↓
ngAfterViewChecked()       ← Repeated

On later change-detection cycles:

ngDoCheck()
      ↓
ngAfterContentChecked()
      ↓
ngAfterViewChecked()

Advantages

1. React After Projected Content Is Checked

Useful when logic specifically needs to happen after Angular checks projected content.

2. Useful with Content Projection

It is relevant when working with:

<ng-content></ng-content>

and content queries such as:

@ContentChild(...)
@ContentChildren(...)

3. Handles Repeated Checks

Unlike ngAfterContentInit(), it participates in subsequent change-detection cycles.

Disadvantages

1. Runs Frequently

This is the biggest concern.

ngAfterContentChecked() {
  console.log('Checked');
}

may execute many times.

Therefore, keep the logic very lightweight.

2. Performance Problems

Avoid expensive operations:

ngAfterContentChecked() {
  // Avoid
  this.performHugeCalculation();
}

3. Avoid API Calls

Don't do this:

ngAfterContentChecked() {
  this.http.get(...).subscribe();
}

It could cause repeated API requests.

Key Points

• ngAfterContentChecked() is an Angular lifecycle hook.
• It relates to projected content.
• Projected content commonly uses <ng-content>.
• It runs after Angular checks projected content.
• It can run many times.
• It does not mean the content necessarily changed.
• ngAfterContentInit() runs once.
• ngAfterContentChecked() runs repeatedly.
• Avoid heavy calculations and API calls inside it.

Interview Questions and Answers

1. What is ngAfterContentChecked()?

It is an Angular lifecycle hook called after Angular checks the content projected into a component.

2. How many times does ngAfterContentChecked() run?

It can run many times because it participates in Angular's change-detection cycles.

3. Does it run only when projected content changes?

No. It runs after Angular checks the projected content, even when no actual content change occurred.

4. What is the difference between ngAfterContentInit() and ngAfterContentChecked()?

ngAfterContentInit() runs once after projected content is initialized.

ngAfterContentChecked() runs repeatedly after Angular checks projected content.

5. Should we call APIs inside ngAfterContentChecked()?

Generally, no. Because the hook can execute frequently, this could result in repeated API calls.

6. What is the difference between ngDoCheck() and ngAfterContentChecked()?

ngDoCheck() allows us to implement custom checking logic during change detection.

ngAfterContentChecked() runs after Angular has checked the projected content.

Easy Memory Trick

ContentInit
    ↓
INITIALIZED
    ↓
ONE TIME


ContentChecked
    ↓
CHECKED
    ↓
MANY TIMES

One-line interview answer

ngAfterContentChecked() is an Angular lifecycle hook that runs after Angular checks projected content and can execute multiple times during the component's lifetime.