@ContentChild and content projection in Angular - Step-by-Step Execution

Concept Flow - @ContentChild and content projection

Parent Component Template

↓

Content Projection Slot <ng-content>

↓

Child Component Receives Projected Content

↓

@ContentChild Decorator Finds Projected Element

↓

Child Component Accesses Projected Content in Code

Content projection inserts external content into a child component's template. @ContentChild lets the child component access that projected content in its code.

Execution Sample

Angular

/* Parent template */
<child-comp>
  <p #proj>Projected Text</p>
</child-comp>

/* Child component */
@ContentChild('proj') projectedParagraph: ElementRef;

Parent projects a paragraph into child. Child uses @ContentChild to get a reference to that paragraph.

Execution Table

Step	Action	Result	Component State	Notes
1	Parent renders <child-comp> with <p #proj> inside	Child template includes <ng-content>	Parent: content ready; Child: waiting for content	Content is passed to child via <ng-content>
2	Angular projects <p #proj> into child's <ng-content>	Child template now contains <p> element	Child: projected content inserted	Content projection happens here
3	Child's @ContentChild('proj') runs after content init	projectedParagraph references <p> element	Child: has reference to projected content	Child can now access projected content in code
4	Child accesses projectedParagraph.nativeElement.textContent	"Projected Text"	Child: can read projected content text	Shows @ContentChild works
5	Parent or child updates projected content	Angular updates DOM accordingly	State updates as needed	Content projection is dynamic
6	Execution ends	All projected content accessible	Stable state	Projection and @ContentChild complete

💡 Content projection completes and @ContentChild references are set after content initialization

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
projectedParagraph	undefined	ElementRef to <p>	ElementRef to <p> with text 'Projected Text'	ElementRef to <p> with text 'Projected Text'

Key Moments - 3 Insights

Why is projectedParagraph undefined before content initialization?

Because @ContentChild queries run only after Angular projects the content (see execution_table step 3). Before that, the child component has no access to projected elements.

Can the child component access projected content in ngOnInit?

No, @ContentChild is set after ngOnInit, typically in ngAfterContentInit lifecycle hook (refer to step 3 in execution_table). Accessing it earlier returns undefined.

What happens if the parent changes the projected content after initial projection?

Angular updates the DOM and the @ContentChild reference remains valid, reflecting the latest content (see step 5). The child can react to changes using lifecycle hooks.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does @ContentChild get the reference to the projected element?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Check the 'Action' and 'Result' columns in step 3 where @ContentChild runs after content projection

According to variable_tracker, what is the value of projectedParagraph after step 4?

A undefined

B ElementRef to <p> with text 'Projected Text'

C null

D A string 'Projected Text'

💡 Hint

Look at the 'After Step 4' column for projectedParagraph in variable_tracker

If the parent removes the <p #proj> element, what happens to projectedParagraph in the child?

A It throws an error

B It remains referencing the old element

C It becomes undefined or null

D It updates to a new element automatically

💡 Hint

Consider how Angular updates @ContentChild references when projected content changes (see key_moments about updates)

Concept Snapshot

@ContentChild and content projection:
- Parent projects content into child via <ng-content>
- Child uses @ContentChild('templateRef') to get projected element
- @ContentChild is set after content init (ngAfterContentInit)
- Child can access and manipulate projected content
- Changes in projected content update references dynamically

Full Transcript

This visual trace shows how Angular's content projection works with @ContentChild. The parent component places content inside the child component's tags. Angular projects this content into the child's <ng-content> slot. After projection, Angular runs @ContentChild queries in the child, setting references to the projected elements. The child can then access these elements in its code, for example to read or modify them. The variable tracker shows the projectedParagraph variable starts undefined and becomes a reference to the projected paragraph element after content initialization. Key moments clarify that @ContentChild is only available after content projection completes, typically in ngAfterContentInit. The visual quiz tests understanding of when @ContentChild is set and how it updates if the projected content changes. This helps beginners see the step-by-step flow of content projection and @ContentChild usage in Angular.