Explain how multi-slot content projection works with ng-content selectors.
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
Configuring a custom layout with Multi-Slot Content Projection
import { Component } from '@angular/core';
@Component({
selector: 'app-card',
standalone: true,
template: '<div class="card-container">' +
' <div class="header">' +
' <ng-content select="header, [card-header]"></ng-content>' +
' </div>' +
' <div class="body">' +
' <ng-content></ng-content>' +
' </div>' +
' <div class="footer">' +
' <ng-content select=".card-footer"></ng-content>' +
' </div>' +
'</div>'
})
export class CardComponent {}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.