ngAfterViewInit vs ngAfterContentInit in Angular

Introduction

Angular lifecycle hooks ngAfterViewInit() and ngAfterContentInit() are often confusing for beginners because both are executed after Angular has initialized parts of a component. However, they work with two completely different concepts: the component’s view and projected content.

Understanding the difference between these hooks is essential when working with decorators like @ViewChild(), @ViewChildren(), @ContentChild(), and @ContentChildren(). Choosing the wrong lifecycle hook can result in undefined values, runtime errors, or unexpected behavior.

What is ngAfterViewInit()?

ngAfterViewInit() is an Angular lifecycle hook that is called once after Angular has fully initialized a component’s view and all of its child views.

A view refers to everything declared inside the component’s own template.

This lifecycle hook belongs to the AfterViewInit interface and is commonly used when you need to access:

Syntax of ngAfterViewInit()

import { Component, AfterViewInit} from '@angular/core';
@Component({
 selector: 'app-home',
 templateUrl: './home.component.html'
})
export class HomeComponent implements AfterViewInit {
 ngAfterViewInit(): void {
   console.log('View Initialized');
 }
}

Angular automatically invokes this hook after the component’s view has been fully initialized.

What is ngAfterContentInit()?

ngAfterContentInit() is another Angular lifecycle hook that executes once after Angular projects external content into a component using <ng-content>.

Unlike ngAfterViewInit(), this hook works with content projection, not the component’s own template.

It belongs to the AfterContentInit interface and is commonly used with:

• @ContentChild()
• @ContentChildren()
• <ng-content>
• Projected directives
• Projected components
• Reusable UI components

Syntax of ngAfterContentInit()

import { Component, AfterContentInit} from '@angular/core';
@Component({
 selector: 'app-card',
 templateUrl: './card.component.html'
})
export class CardComponent implements AfterContentInit {
 ngAfterContentInit(): void {
   console.log('Content Initialized');
 }
}

Angular calls this method after projected content has been initialized.

Understanding View vs Content

Before comparing these lifecycle hooks, it’s important to understand the difference between a view and content.

View

A view is the HTML defined inside the component itself.

Example:

<div>
   <button>Save</button>
</div>

The button belongs to the component’s view.

Content

Content is HTML provided by a parent component and inserted through <ng-content>.

Example:

<app-card>
   <h2>Angular Tutorial</h2>
</app-card>

Inside CardComponent:

<div class="card">
   <ng-content></ng-content>
</div>

The <h2> element is projected content, not part of the card’s view.

This distinction determines which lifecycle hook you should use.

ngAfterViewInit vs ngAfterContentInit

Angular Lifecycle Order

The execution order of Angular lifecycle hooks is:

Constructor
↓
ngOnChanges()
↓
ngOnInit()
↓
ngDoCheck()
↓
ngAfterContentInit()
↓
ngAfterContentChecked()
↓
ngAfterViewInit()
↓
ngAfterViewChecked()
↓
ngOnDestroy()

Notice that ngAfterContentInit() executes before ngAfterViewInit().

This is because Angular projects external content before initializing the component’s own view.

Example 1: Using ngAfterViewInit()

Suppose we have a child component.

Child Component

import { Component } from '@angular/core';
@Component({
 selector: 'app-child',
 template: `<h2>Child Component`
})
export class ChildComponent {
 sayHello() {
   console.log('Hello from Child');
 }
}

Parent Component

import {
 Component,
 ViewChild,
 AfterViewInit
} from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
 selector: 'app-parent',
 templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
 @ViewChild(ChildComponent)
 child!: ChildComponent;
 ngAfterViewInit() {
   this.child.sayHello();
 }
}

Parent Template

<app-child></app-child>

Output

Since the child component belongs to the parent’s view, ngAfterViewInit() is the correct lifecycle hook.

Example 2: Using ngAfterContentInit()

Suppose a reusable card component projects content.

Card Template

<div class="card">
   <ng-content></ng-content>
</div>

Card Component

import {
 Component,
 ContentChild,
 AfterContentInit
} from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
 selector: 'app-card',
 templateUrl: './card.component.html'
})
export class CardComponent implements AfterContentInit {
 @ContentChild(HighlightDirective)
 highlight!: HighlightDirective;
 ngAfterContentInit() {
   this.highlight.activate();
 }
}

Parent Template

<app-card>
   <h2 appHighlight>
       Angular Guide
   </h2>
</app-card>

Here, the projected heading is available only after ngAfterContentInit() executes.

Real-Life Example

Imagine you’re building a dashboard application.

The dashboard contains several internal widgets.

<app-chart></app-chart>
<app-table></app-table>
<app-summary></app-summary>

Each widget belongs to the dashboard’s view.

You want to initialize the charts after Angular creates them.

@ViewChildren(ChartComponent)
charts!: QueryList<ChartComponent>;
ngAfterViewInit() {
   this.charts.forEach(chart => {
       chart.loadData();
   });
}

This is a perfect use case for ngAfterViewInit().

Now consider building a custom card component.

<app-card>
   <app-card-header>
       Sales Report
   </app-card-header>
   <app-card-body>
       Monthly Data
   </app-card-body>
</app-card>

The header and body are projected into the card.

The card component can retrieve them using @ContentChild() or @ContentChildren() inside ngAfterContentInit().

This makes reusable UI components much more flexible.

When Should You Use ngAfterViewInit()?

Use ngAfterViewInit() when you need to:

When Should You Use ngAfterContentInit()?

Use ngAfterContentInit() when you need to:

Common Mistakes

1. Using ngAfterViewInit() for Projected Content

Incorrect:

@ContentChild(HeaderComponent)
header!: HeaderComponent;
ngAfterViewInit() {
  console.log(this.header);
}

Correct:

ngAfterContentInit() {
  console.log(this.header);
}

2. Using ngAfterContentInit() for ViewChild

Incorrect:

@ViewChild(InputComponent)
input!: InputComponent;
ngAfterContentInit() {
}

Correct:

ngAfterViewInit() {
}

3. Accessing ViewChild in ngOnInit()

Incorrect:

ngOnInit() {
  this.child.sayHello();
}

The child may not yet be initialized.

Correct:

ngAfterViewInit() {
  this.child.sayHello();
}

4. Confusing View with Content

Remember:

• Inside the component template = View
• Passed through <ng-content> = Content

This simple rule helps avoid many lifecycle-related errors.

Best Practices

To write clean and maintainable Angular code:

Conclusion

ngAfterViewInit() is designed for working with the component’s own view, including child components and elements accessed through @ViewChild() and @ViewChildren(). In contrast, ngAfterContentInit() is intended for handling projected content inserted via <ng-content>, typically accessed using @ContentChild() and @ContentChildren().

A simple way to remember the difference is:

• ngAfterViewInit() → Works with the component’s own template (View).
• ngAfterContentInit() → Works with content projected from a parent component (Content).

ngAfterViewInit vs ngAfterContentInit – Interview Questions

ngAfterViewInit vs ngAfterContentInit – Objective Questions (MCQs)

Related Angular Tutorials