ngAfterContentInit for projected content in Angular - Step-by-Step Execution

Concept Flow - ngAfterContentInit for projected content

Component Initialized

↓

Content Projection Happens

↓

ngAfterContentInit Called

↓

Access Projected Content

↓

Perform Actions on Projected Content

Angular initializes the component, projects external content inside it, then calls ngAfterContentInit to let you work with that projected content.

Execution Sample

Angular

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

@Component({ selector: 'child-comp', template: '<ng-content></ng-content>' })
export class ChildComp implements AfterContentInit {
  @ContentChild('projected') projectedContent!: ElementRef;
  ngAfterContentInit() {
    console.log(this.projectedContent.nativeElement.textContent);
  }
}

This component projects content and logs the text of an element marked with #projected after content initialization.

Execution Table

Step	Action	Projected Content Present?	ngAfterContentInit Called?	Output/Effect
1	Component created, content not projected yet	No	No	No output
2	Content projection happens, external content inserted	Yes	No	Content available inside component
3	ngAfterContentInit lifecycle hook runs	Yes	Yes	Logs projected content text
4	Component ready with projected content accessible	Yes	Yes	Can manipulate or read projected content

💡 ngAfterContentInit runs once after projected content is inserted, allowing safe access to it.

Variable Tracker

Variable	Start	After Content Projection	After ngAfterContentInit
projectedContent	undefined	ElementRef to projected element	ElementRef to projected element

Key Moments - 2 Insights

Why can't we access projected content in the constructor or ngOnInit?

Because projected content is not yet inserted when constructor or ngOnInit run. The execution_table shows projectedContent is undefined at step 1 and only available after content projection at step 2, before ngAfterContentInit at step 3.

What happens if there is no projected content with the expected selector?

The projectedContent variable remains undefined, so accessing it in ngAfterContentInit would cause errors. The execution_table step 1 shows 'Projected Content Present?' as 'No' if missing.

Visual Quiz - 3 Questions

Look at the execution table, at which step is ngAfterContentInit called?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Check the 'ngAfterContentInit Called?' column in the execution_table.

According to variable_tracker, what is the value of projectedContent after content projection but before ngAfterContentInit?

A undefined

B ElementRef to projected element

C null

D string text content

💡 Hint

Look at the 'After Content Projection' column for projectedContent in variable_tracker.

If the projected content is missing, what will happen when ngAfterContentInit tries to access projectedContent?

A It will throw an error because projectedContent is undefined

B Nothing happens, code skips safely

C It will log the content text normally

D ngAfterContentInit will not be called

💡 Hint

Refer to key_moments about missing projected content and execution_table step 1.

Concept Snapshot

ngAfterContentInit runs once after Angular inserts projected content.
Use @ContentChild to get references to projected elements.
Access projected content safely only inside ngAfterContentInit or later.
Trying to access projected content earlier returns undefined.
This hook helps manipulate or read projected content after projection.

Full Transcript

In Angular, when you use content projection, the external content is inserted into your component after it is created. The ngAfterContentInit lifecycle hook runs once after this projection happens. This means you cannot access projected content in the constructor or ngOnInit because it is not yet available. Using @ContentChild with a template reference lets you get a handle on the projected element. The execution table shows the component lifecycle steps: creation, content projection, ngAfterContentInit call, and ready state. The variable tracker shows projectedContent is undefined at start, then becomes an ElementRef after projection. Key moments clarify why accessing projected content too early fails and what happens if projected content is missing. The visual quiz tests understanding of when ngAfterContentInit runs, the state of projectedContent, and error cases. Remember, ngAfterContentInit is your safe place to work with projected content in Angular.