What is content projection and how does ng-content work in Angular?
Understand Angular content projection and how ng-content renders parent markup inside child components, including multi-slot layouts and binding context.
Expected Interview Answer
Content projection is an Angular technique for passing markup from a parent component into a child component's template, and ng-content is the placeholder element that marks where that projected content should render.
It lets you build flexible, reusable wrapper components such as cards, dialogs, and panels whose inner content is supplied by the consumer. A single <ng-content> projects everything, while multiple <ng-content select="..."> slots use CSS selectors to route different pieces of content to specific locations, enabling multi-slot layouts.
- Builds reusable, configurable wrapper components
- Keeps layout structure in the child while content stays with the parent
- Supports multi-slot layouts via select selectors
- Avoids duplicating shell markup across pages
- Projected content keeps the parent's data binding context
AI Mentor Explanation
Content projection is like a stadium's big screen frame: the frame and its borders are fixed, but ng-content is the blank display area where whatever footage the broadcaster feeds in appears. The wrapper stays the same match after match while the projected highlights change each innings.
Step-by-Step Explanation
Step 1
Add ng-content to the child
Place <ng-content></ng-content> in the child component's template where projected markup should appear.
Step 2
Wrap content in the parent
In the parent template, put the content between the child's opening and closing selector tags.
Step 3
Angular projects it
At render time Angular moves the parent's inner markup into the child's ng-content slot.
Step 4
Add named slots if needed
Use multiple <ng-content select="[header]"> tags with attribute or element selectors for multi-slot layouts.
Step 5
Keep the binding context
Remember projected content is bound in the parent's context, so its data and events belong to the parent.
What Interviewer Expects
- Definition of content projection and ng-content's role
- Difference between single-slot and multi-slot projection
- Understanding of the select attribute with CSS selectors
- Awareness that projected content uses the parent's binding context
- A practical use case like a reusable card or dialog
Common Mistakes
- Thinking projected content binds in the child's context
- Using multiple plain <ng-content> without select, so all content lands in the last slot
- Confusing content projection with @ViewChild or @Input
- Expecting ng-content to duplicate content across multiple slots
Best Answer (HR Friendly)
“Content projection lets you build a reusable component shell, like a card, and drop different content inside it from wherever you use it. The ng-content tag simply marks the empty spot where that outside content should show up.”
Code Example
import { Component } from '@angular/core';
@Component({
selector: 'app-card',
template: `
<div class="card">
<header><ng-content select="[card-title]"></ng-content></header>
<section><ng-content></ng-content></section>
</div>
`
})
export class CardComponent {}<app-card>
<h2 card-title>Monthly Report</h2>
<p>All figures are up compared to last month.</p>
</app-card>Follow-up Questions
- How do you project content into multiple named slots?
- What binding context does projected content use?
- How does ngProjectAs help when a selector does not match?
- How is content projection different from using @Input?
MCQ Practice
1. What does <ng-content> do?
ng-content is the placeholder where the parent's projected markup is rendered inside the child.
2. How do you create multi-slot projection?
The select attribute with CSS selectors routes different content pieces to specific slots.
3. In which context is projected content bound?
Projected content is declared in and bound to the parent component's context.
Flash Cards
What is content projection? — Passing parent markup into a child component's template to build reusable wrappers.
What is ng-content? — The placeholder element marking where projected content renders in the child.
How do you make named slots? — Use <ng-content select="..."> with CSS selectors for multi-slot layouts.
What context does projected content use? — The parent component's binding context, not the child's.