What is ngAfterContentInit() in Angular?

ngAfterContentInit() is an Angular lifecycle hook that is called once after Angular initializes the content projected into a component using <ng-content>.

Simple definition: ngAfterContentInit() runs after the parent-provided projected content is initialized inside the child component.

Why Do We Need ngAfterContentInit()?

Suppose a parent component sends some HTML/content into a child:

<app-card>
  <h2>Welcome Syed</h2>
</app-card>

The child displays that content using:

<div>
  <ng-content></ng-content>
</div>

This is called Content Projection.

Sometimes the child needs to access or perform logic on that projected content after Angular has initialized it.

That's where we use:

ngAfterContentInit()

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: `
    <h1>Parent Component</h1>

    <app-card>
      <h2 #title>Welcome Syed</h2>
    </app-card>
  `
})
export class App {
}

card.ts — Child Component

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

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

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

  @ContentChild('title')
  title!: ElementRef;

  ngAfterContentInit(): void {
    console.log(
      'Projected content:',
      this.title.nativeElement.textContent
    );
  }
}

Explanation

The parent has:

<app-card>
  <h2 #title>Welcome Syed</h2>
</app-card>

The <h2> belongs to the parent's projected content.

The child receives it through:

<ng-content></ng-content>

So:

Parent
  │
  │ Project content
  ▼
<app-card>
     │
     ▼
<ng-content>
     │
     ▼
Welcome Syed

What is @ContentChild() doing?

Inside the child:

@ContentChild('title')
title!: ElementRef;

@ContentChild() gets a reference to content that was projected from the parent.

The #title comes from:

<h2 #title>Welcome Syed</h2>

Why Access It in ngAfterContentInit()?

Angular needs time to initialize the projected content.

Therefore, this is the appropriate lifecycle hook:

ngAfterContentInit(): void {
  console.log(this.title.nativeElement.textContent);
}

Output:

Welcome Syed

The sequence is roughly:

Create Child Component
        ↓
ngOnChanges()
        ↓
ngOnInit()
        ↓
ngDoCheck()
        ↓
Initialize projected content
        ↓
ngAfterContentInit()
        ↓
Projected content is available

How Many Times Does It Run?

ngAfterContentInit() runs only once for each component instance.

Component created
      ↓
Content initialized
      ↓
ngAfterContentInit()  ← ONE TIME

It is different from:

ngAfterContentChecked()

which can run repeatedly.

ngOnInit() vs ngAfterContentInit()

This is an important distinction.

Think:

ngOnInit()
    ↓
Component initialized

ngAfterContentInit()
    ↓
Projected content initialized

ngAfterContentInit() vs ngAfterViewInit()

This is another very important interview question.

Content

Content means HTML/components passed from the parent into the child.

<app-card>

  <!-- Content -->
  <h2>Welcome</h2>

</app-card>

The child receives it:

<ng-content></ng-content>

Use:

ngAfterContentInit()

View

View means elements that belong to the child's own template.

<h2 #title>Child Title</h2>
<button>Save</button>

Use:

ngAfterViewInit()

So remember:

Parent gives content
       ↓
<ng-content>
       ↓
ngAfterContentInit()


Child's own template
       ↓
View
       ↓
ngAfterViewInit()

And queries commonly pair like this:

@ContentChild
      ↓
ngAfterContentInit()


@ViewChild
      ↓
ngAfterViewInit()

Advantages

1. Access Projected Content

Useful when working with:

<ng-content></ng-content>

2. Works with Content Queries

It is commonly used with:

@ContentChild()
@ContentChildren()

3. Runs Only Once

Unlike content-checking hooks, it runs only once after the initial projected content is initialized.

4. Good for Initialization Logic

Useful when some initialization depends on parent-provided projected content.

Disadvantages

There are no major disadvantages, but there are some considerations.

1. Only Useful for Projected Content

If you're working with the component's own template, ngAfterViewInit() is usually the relevant hook instead.

2. Don't Put Heavy Logic Here

Although it runs only once, lifecycle hooks should generally remain focused.

3. Don't Confuse Content and View

A common mistake is:

@ContentChild → projected parent content
@ViewChild    → child's own view

Key Points

• ngAfterContentInit() is an Angular lifecycle hook.
• It runs once.
• It runs after Angular initializes projected content.
• Projected content commonly uses <ng-content>.
• It is commonly used with @ContentChild() and @ContentChildren().
• It runs after ngOnInit().
• Don't confuse it with ngAfterViewInit().
• Content = provided by parent.
• View = component's own template.

Interview Questions and Answers

1. What is ngAfterContentInit()?

ngAfterContentInit() is an Angular lifecycle hook that runs once after Angular initializes content projected into a component.

2. How many times does ngAfterContentInit() run?

It runs once for each component instance.

3. What is projected content?

Projected content is content passed from a parent into a child component and rendered using:

<ng-content></ng-content>

4. Which queries are commonly used with ngAfterContentInit()?

@ContentChild()
@ContentChildren()

They query projected content.

5. What is the difference between ngOnInit() and ngAfterContentInit()?

ngOnInit() is used for general component initialization. ngAfterContentInit() runs later, after projected content has been initialized.

6. What is the difference between ngAfterContentInit() and ngAfterViewInit()?

ngAfterContentInit() deals with content projected from the parent.

ngAfterViewInit() deals with the component's own view/template.

Easy Memory Trick

ngAfterContentInit
        ↓
CONTENT from parent
        ↓
<ng-content>
        ↓
@ContentChild


ngAfterViewInit
        ↓
VIEW of child
        ↓
Child's template
        ↓
@ViewChild

One-line interview answer

ngAfterContentInit() is called once after Angular initializes the content projected from a parent component through <ng-content>, and it is commonly used when working with @ContentChild or @ContentChildren.