Explain content projection.
01
01
Understand the problem
content-projection
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
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
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.