ngAfterContentInit for projected content in Angular - Mini Project: Build & Apply

Using ngAfterContentInit to Access Projected Content in Angular

📖 Scenario: You are building a reusable Angular component that displays a message and also projects some custom content inside it. You want to run some code right after the projected content is ready.

🎯 Goal: Create an Angular component that uses ngAfterContentInit lifecycle hook to detect when projected content is initialized and then update a message accordingly.

📋 What You'll Learn

Create a standalone Angular component called MessageComponent with a @ContentChild to access projected content.

Add a boolean variable contentReady to track if projected content is initialized.

Implement the ngAfterContentInit lifecycle hook to set contentReady to true.

Use the contentReady variable in the template to show a message indicating projected content is loaded.

💡 Why This Matters

🌍 Real World

This technique is useful when building reusable Angular components that need to interact with or modify content passed from parent components.

💼 Career

Understanding Angular lifecycle hooks and content projection is essential for frontend developers working with Angular to create flexible and maintainable UI components.

1

Create the MessageComponent with projected content slot

Create a standalone Angular component called MessageComponent with a template that includes a <ng-content> tag inside a <div>. The component should have a public boolean variable contentReady initialized to false.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-message',
  standalone: true,
  template: `
    
      
    
  `
})
export class MessageComponent {
  contentReady = false;
  // Your code here
}

Need a hint?

Use contentReady = false inside the class and include <ng-content> in the template.

2

Add @ContentChild to access projected content element

Add an import for ContentChild and ElementRef from @angular/core. Inside MessageComponent, add a @ContentChild property called projectedContent of type ElementRef to access the projected content element.

Angular

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

@Component({
  selector: 'app-message',
  standalone: true,
  template: `
    
      
    
  `
})
export class MessageComponent {
  contentReady = false;
  @ContentChild(ElementRef) projectedContent!: ElementRef;
  // Your code here
}

Need a hint?

Use @ContentChild(ElementRef) to get the projected content element.

3

Implement ngAfterContentInit to detect projected content initialization

Import AfterContentInit from @angular/core and implement it in MessageComponent. Add the ngAfterContentInit() method that sets contentReady to true.

Angular

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

@Component({
  selector: 'app-message',
  standalone: true,
  template: `
    
      
    
  `
})
export class MessageComponent implements AfterContentInit {
  contentReady = false;
  @ContentChild(ElementRef) projectedContent!: ElementRef;

  ngAfterContentInit() {
    // Your code here
  }
}

Need a hint?

Implement AfterContentInit and set contentReady = true inside ngAfterContentInit().

4

Update template to show message when projected content is ready

Modify the template of MessageComponent to add a <p> element below <ng-content> that displays the text "Projected content is loaded!" only when contentReady is true using Angular's *ngIf directive.

Angular

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

@Component({
  selector: 'app-message',
  standalone: true,
  imports: [NgIf],
  template: `
    
      
      
    
  `
})
export class MessageComponent implements AfterContentInit {
  contentReady = false;
  @ContentChild(ElementRef) projectedContent!: ElementRef;

  ngAfterContentInit() {
    this.contentReady = true;
  }
}

Need a hint?

Use *ngIf="contentReady" on a paragraph to show the message only when content is ready.