What is content projection and ng-content? | Interview Question

Q: What is content projection and ng-content?

**Target Audience:** Developers building reusable wrapper components (cards, callouts, dialogs, layouts) who want to understand how ng-content really works. **Difficulty:** Easy to Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every console log, rendered output and CSS selector quoted below was produced on Angular 22.2.3 by compiling the components with ngc (strict templates) and running them in jsdom. ## 1. Why This Even Matters — A Story First A picture-framing shop sells frames: wood, glass, a mount, a hook on the back. You bring the picture. The shop does not paint your picture and does not care what it shows; it only decides *where* the picture sits inside the frame. If you bring nothing, the shop puts its sample photo of a beach in the frame so it does not look broken. That frame is a component with **content projection**. The picture you bring is the **content** written between the component'

The problem

Question presented to candidate: "We want a reusable <app-callout> that draws a styled frame, while each page decides what goes inside. How does content projection with ng-content work, and what are the gotchas?"

What a strong answer should cover:

Content projection passes markup written between a component's tags (its content) into a spot in that component's template marked by <ng-content>.
The projected content is created and owned by the parent: its bindings use the parent's state and update with the parent's change detection.
<ng-content> is a placeholder, not a real element or a directive; it cannot be bound, styled or repeated.
Fallback content (v18+): markup inside <ng-content>...</ng-content> shows when nothing is projected.
Gotcha: wrapping <ng-content> in @if hides content but does not prevent it from being created; use ng-template + ngTemplateOutlet or @defer for truly lazy content.
Projected content lands once: two <ng-content> for the same content means only the last receives it.

Clarifying questions expected:

"Does the wrapper need several distinct areas (header, body, footer)? That would be multi-slot projection."
"Should hidden content be created lazily, or is hiding enough?"

Code / implementation expected: Yes — a wrapper component using ng-content, ideally with fallback content.

content-projection

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers building reusable wrapper components (cards, callouts, dialogs, layouts) who want to understand how ng-content really works. Difficulty: Easy to Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every console log, rendered output and CSS selector quoted below was produced on Angular 22.2.3 by compiling the components with ngc (strict templates) and running them in jsdom.

1. Why This Even Matters — A Story First

A picture-framing shop sells frames: wood, glass, a mount, a hook on the back. You bring the picture. The shop does not paint your picture and does not care what it shows; it only decides where the picture sits inside the frame. If you bring nothing, the shop puts its sample photo of a beach in the frame so it does not look broken.

That frame is a component with content projection. The pictur

The solution is hidden so you can try first

8 min read · 10 sections

Read the code

AngularA wrapper with ng-content and fallback content, and the projected-child lifecycle trap

Open in playground

import { Component, signal } from "@angular/core";

// A reusable wrapper: it draws the frame, the parent supplies the inside.
@Component({
  selector: "app-callout",
  template: `
    <div class="callout" style="border: 2px solid teal; padding: 8px; margin: 6px 0">
      <ng-content>Nothing to report.</ng-content>
    </div>
  `,
})
export class CalloutComponent {}

// A projected child that announces when it is created.
@Component({ selector: "app-chart", template: `<i>[chart]</i>` })
export class ChartComponent {
  constructor() {
    console.log("ChartComponent created");
  }
}

// Hides its projected content, but does NOT stop it being created.
@Component({
  selector: "app-collapsible",
  template: `
    <button (click)="open.set(!open())">{{ open() ? "Collapse" : "Expand" }}</button>
    @if (open()) {
      <ng-content />
    }
  `,
})
export class CollapsibleComponent {
  open = signal(false);
}

@Component({
  selector: "app-root",
  imports: [CalloutComponent, ChartComponent, CollapsibleComponent],
  template: `
    <app-callout>Deploy finished in <b>{{ seconds() }}s</b>.</app-callout>
    <app-callout />
    <app-collapsible><app-chart /></app-collapsible>
    <button (click)="seconds.set(seconds() + 1)">Slower deploy</button>
  `,
})
export class AppComponent {
  seconds = signal(42);
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.