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
}

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
}

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
  }
}

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;
  }
}

Hint

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

Practice

1. What is the primary purpose of the ngAfterContentInit lifecycle hook in Angular?

easy

A. To run code after projected content has been inserted into the component

B. To initialize component input properties

C. To detect changes in component data bindings

D. To clean up resources before the component is destroyed

Solution

1. Step 1: Understand the role of ngAfterContentInit

   This hook runs after Angular projects external content into the component's <ng-content> slot.

2. Step 2: Identify when to use it

   It is used to safely access or manipulate the projected content once it is ready, not before.

3. Final Answer:

   To run code after projected content has been inserted into the component -> Option A

4. Quick Check:

   ngAfterContentInit = runs after projected content ready [OK]

Hint: Remember: ngAfterContentInit runs after content projection is done [OK]

Common Mistakes:

• Confusing ngAfterContentInit with ngOnInit
• Trying to access projected content before this hook
• Using it to detect input property changes

2. Which of the following is the correct way to implement ngAfterContentInit in an Angular component?

easy

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

B. ngAfterContentInit: () => { console.log('Content initialized'); }

C. ngAfterContentInit = function() { console.log('Content initialized'); }

D. function ngAfterContentInit() { console.log('Content initialized'); }

Solution

1. Step 1: Recall Angular lifecycle hook syntax

   Lifecycle hooks are implemented as methods on the component class without assignment or arrow functions.

2. Step 2: Check each option

   ngAfterContentInit() { console.log('Content initialized'); } uses the correct method syntax. Arrow functions or assignments are not valid lifecycle hook implementations. A standalone function is not a class method.

3. Final Answer:

   ngAfterContentInit() { console.log('Content initialized'); } -> Option A

4. Quick Check:

   Lifecycle hooks are class methods, not arrow functions [OK]

Hint: Use method syntax without arrow functions for lifecycle hooks [OK]

Common Mistakes:

• Using arrow functions for lifecycle hooks
• Defining lifecycle hooks outside the class
• Assigning lifecycle hooks to variables

3. Given the following Angular component code, what will be logged to the console when the component is initialized?

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

@Component({
  selector: 'child-comp',
  template: ``
})
export class ChildComp implements AfterContentInit {
  @ContentChild('projected') projectedContent!: ElementRef;

  ngAfterContentInit() {
    console.log(this.projectedContent.nativeElement.textContent.trim());
  }
}

// Usage in parent template:
// 
Hello World

medium

A. Error: Cannot read property 'nativeElement' of undefined

B. undefined

C. Hello World

D. Empty string

Solution

1. Step 1: Understand ContentChild and ngAfterContentInit

   The @ContentChild('projected') decorator gets the element with template reference #projected projected inside <ng-content>. This is available after content initialization.

2. Step 2: Check what ngAfterContentInit logs

   It logs the trimmed text content of the projected element, which is 'Hello World'.

3. Final Answer:

   Hello World -> Option C

4. Quick Check:

   ContentChild element text = 'Hello World' [OK]

Hint: ContentChild is ready in ngAfterContentInit, so text logs correctly [OK]

Common Mistakes:

• Trying to access ContentChild before ngAfterContentInit
• Forgetting to use template reference variable
• Assuming projected content is undefined

4. Consider this Angular component code snippet:

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

@Component({
  selector: 'proj-comp',
  template: ``
})
export class ProjComp implements AfterContentInit {
  @ContentChild('contentRef') content!: ElementRef;

  ngAfterContentInit() {
    console.log(this.content.nativeElement.textContent);
  }
}

When used as <proj-comp><p>Test</p></proj-comp>, what error will occur and why?

medium

A. Error: ngAfterContentInit is not called

B. Error: content is undefined because no template reference variable 'contentRef' is present

C. No error; logs 'Test' correctly

D. Error: nativeElement is not accessible

Solution

1. Step 1: Analyze ContentChild selector

   The @ContentChild('contentRef') looks for an element with template reference variable #contentRef inside projected content.

2. Step 2: Check usage in parent template

   The projected <p>Test</p> has no #contentRef variable, so content is undefined.

3. Step 3: Understand consequence in ngAfterContentInit

   Accessing this.content.nativeElement causes a runtime error because content is undefined.

4. Final Answer:

   Error: content is undefined because no template reference variable 'contentRef' is present -> Option B

5. Quick Check:

   Missing template ref causes undefined ContentChild [OK]

Hint: ContentChild needs matching template ref; else undefined error [OK]

Common Mistakes:

• Assuming ContentChild finds elements without template refs
• Ignoring runtime errors from undefined properties
• Confusing ngAfterContentInit with ngOnInit timing

5. You want to create a component that projects a list of items and highlights the first projected item after content initialization. Which approach correctly uses ngAfterContentInit to achieve this?

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

@Component({
  selector: 'highlight-list',
  template: ``
})
export class HighlightList implements AfterContentInit {
  @ContentChildren('item') items!: QueryList<ElementRef>;

  ngAfterContentInit() {
    // What should go here?
  }
}

Options for ngAfterContentInit implementation:

hard

A. document.querySelector('item').style.backgroundColor = 'yellow';

B. this.items.nativeElement.style.backgroundColor = 'yellow';

C. this.items[0].nativeElement.style.backgroundColor = 'yellow';

D. this.items.first.nativeElement.style.backgroundColor = 'yellow';

Solution

1. Step 1: Understand ContentChildren and QueryList

   @ContentChildren('item') collects all projected elements with template ref #item into a QueryList. Access the first element with items.first.

2. Step 2: Apply style to first projected item

   Use items.first.nativeElement.style.backgroundColor to highlight the first item safely after content is initialized.

3. Step 3: Evaluate other options

   this.items.nativeElement.style.backgroundColor = 'yellow'; is invalid because QueryList has no nativeElement property. this.items[0].nativeElement.style.backgroundColor = 'yellow'; is invalid because QueryList is not an array. document.querySelector('item').style.backgroundColor = 'yellow'; uses direct DOM query which breaks Angular encapsulation.

4. Final Answer:

   this.items.first.nativeElement.style.backgroundColor = 'yellow'; -> Option D

5. Quick Check:

   Use QueryList.first to access first projected element [OK]

Hint: Use QueryList.first, not array or direct DOM, to access projected items [OK]

Common Mistakes:

• Treating QueryList as an array
• Using direct DOM queries instead of Angular references
• Accessing nativeElement on QueryList itself