ngAfterViewInit vs ngAfterContentInit in Angular

Both are Angular LifeCycle Hooks. Many developers get confused about when to use which.

In this post, we will understand the difference between ngAfterViewInit vs ngAfterContentInit in Angular 17+ version.

What is ngAfterViewInit?

ngAfterViewInit runs after Angular initializes the component’s view which has

1. Component template
2. Child components
3. DOM elements
4. ViewChild / ViewChildren references

Where to use ngAfterViewInit?

There are many ways to use ngAfterViewInit.

1. Accessing DOM elements
2. Initializing charts, sliders, maps, animations
3. Integrating third-party UI libraries

Example:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
ngAfterViewInit Example
    
Hello World
  `,
  styles: [`
    .demo-box {
      width: 200px;
      height: 80px;
      background: green;
      padding: 10px;
      margin-top: 20px;
    }
  `]
})
export class AppComponent implements AfterViewInit {

  @ViewChild('box') box!: ElementRef;

  ngAfterViewInit() {
    console.log('View Initialized');
    this.box.nativeElement.style.background = 'red';
    this.box.nativeElement.style.border = '2px solid black';
  }
}

What is ngAfterContentInit?

ngAfterContentInit runs after Angular initializes projected content, i.e., content passed from the parent component via <ng-content>.

Where to use ngAfterContentInit?

We have many options to use ngAfterContentInit

1. Accessing projected content
2. Working with @ContentChild, @ContentChildren
3. Building reusable components such as modal, card, layout, etc.

Example: ngAfterContentInit

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

@Component({
  selector: 'child-box',
  standalone: true,
  template: `
  <div class="child-container">
  <ng-content></ng-content>
  </div>
  `,
  styles: [`
    .child-container {
      border: 2px dashed #555;
      padding: 15px;
      margin-top: 20px;
      background: #fafafa;
    }
  `]
})
export class ChildComponent implements AfterContentInit {

  @ContentChild('projected') projectedContent!: ElementRef;

  ngAfterContentInit() {
    console.log('Content Initialized');
    this.projectedContent.nativeElement.style.color = 'blue';
    this.projectedContent.nativeElement.style.fontWeight = 'bold';
  }
}

in app.component.ts

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],
  template: `
   <h2>ngAfterContentInit Example</h2>
    <child-box>
      <p #projected>This is projected content from Parent!</p>
    </child-box>
  `
})
export class AppComponent { }

Difference Between ngAfterViewInit and ngAfterContentInit

I will show you the difference between ngAfterViewInit vs ngAfterContentInit