Sign in
Skip to solution
mediumFrontend

What is content projection and ng-content?

81 views
01

Understand the problem

Explain content projection.

content-projection
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Content projection lets a component render markup passed between its tags via <ng-content>. Multi-slot projection uses <ng-content select="..."> to place different projected pieces — enabling flexible, reusable components like cards and dialogs.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A card with default + named slots
import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  standalone: true,
  template: `
    <header><ng-content select="[card-title]"></ng-content></header>
    <div class="body"><ng-content></ng-content></div>   <!-- default slot -->
  `,
})
export class CardComponent {}

// Parent usage:
//   <app-card>
//     <h3 card-title>Profile</h3>     <!-- goes to the named slot -->
//     <p>Any body content here.</p>   <!-- goes to the default slot -->
//   </app-card>
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 78 of 121 decoded in the Angular track. One more won't hurt.

Back to track