ng-content for slot-based composition in Angular - Step-by-Step Execution

Concept Flow - ng-content for slot-based composition

Parent Component Template

↓

Uses <ng-content> in Child

↓

Angular Projects Parent Content

↓

Content Rendered in Child Slots

↓

Final Rendered DOM with Parent Content in Child

Angular takes the content inside a parent component's tag and inserts it into the child component where <ng-content> tags are placed.

Execution Sample

Angular

/* Parent template */
<child>
  <h1>Title</h1>
  <p>Paragraph</p>
</child>

/* Child template */
<div>
  <ng-content></ng-content>
</div>

Parent passes HTML content to child, which displays it inside its <ng-content> placeholder.

Execution Table

Step	Action	Parent Content	Child Template	Resulting Render
1	Parent renders <child> with inner HTML	<h1>Title</h1><p>Paragraph</p>	<div><ng-content></ng-content></div>	Child component placeholder ready
2	Angular finds <ng-content> in child	<h1>Title</h1><p>Paragraph</p>	<div><ng-content></ng-content></div>	Prepare to insert parent content
3	Angular projects parent content into <ng-content>	<h1>Title</h1><p>Paragraph</p>	<div><ng-content></ng-content></div>	<div><h1>Title</h1><p>Paragraph</p></div>
4	Browser renders final DOM	<h1>Title</h1><p>Paragraph</p>	<div><ng-content></ng-content></div>	Visible: Title and Paragraph inside child div

💡 All parent content inserted into child at <ng-content>, rendering completes.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
Parent Content	Empty	<h1>Title</h1><p>Paragraph</p>	<h1>Title</h1><p>Paragraph</p>	<h1>Title</h1><p>Paragraph</p>
Child Template	<div><ng-content></ng-content></div>	<div><ng-content></ng-content></div>	<div><ng-content></ng-content></div>	<div><h1>Title</h1><p>Paragraph</p></div>
Rendered DOM	Empty	Empty	Empty	<div><h1>Title</h1><p>Paragraph</p></div>

Key Moments - 2 Insights

Why does the content inside <child> appear inside the child component's template?

Because Angular replaces the <ng-content> tag in the child template with the content placed inside the <child> tag in the parent template, as shown in execution_table step 3.

What happens if the child component template has multiple <ng-content> tags?

Angular can project different parts of the parent content into different <ng-content> slots using selectors, but in this example with one <ng-content>, all content goes there (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What does Angular do at this step?

A It duplicates the child template.

B It removes the parent content from the DOM.

C It inserts the parent content inside the child component's <ng-content> tag.

D It ignores the parent content.

💡 Hint

Check the 'Action' and 'Resulting Render' columns at step 3 in the execution_table.

At which step does the browser finally render the combined content?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look for the step where 'Browser renders final DOM' is mentioned in the execution_table.

If the child template had no <ng-content> tag, what would happen to the parent content?

A It would be ignored and not rendered inside the child.

B It would still appear inside the child component.

C It would cause an error.

D It would be rendered outside the child component.

💡 Hint

Recall that is the placeholder for parent content projection as shown in the concept_flow.

Concept Snapshot

ng-content lets Angular insert parent HTML into child templates.
Parent writes content inside child tags.
Child uses <ng-content> as a placeholder.
Angular replaces <ng-content> with parent content.
Multiple slots possible with selectors.
No <ng-content> means no content projection.

Full Transcript

This visual trace shows how Angular's ng-content works for slot-based composition. The parent component writes HTML inside the child component's tag. The child component template contains an <ng-content> tag, which acts as a placeholder. Angular replaces this placeholder with the parent's content during rendering. The execution table shows step-by-step how the parent content is projected into the child template and finally rendered in the browser. Variables track the content and template changes. Key moments clarify why content appears inside the child and what happens without ng-content. The quiz tests understanding of these steps. This helps beginners see how Angular slots work visually.