javascript / intermediate
Snippet
Multi-slot Content Projection
Content projection allows components to receive and render external HTML. Using the 'select' attribute with ng-content, you can define multiple slots to organize where different parts of the projected content appear.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
@Component({selector: 'app-card',template: `<div class="card"><header><ng-content select="[header]"></ng-content></header><main><ng-content></ng-content></main></div>`,standalone: true})export class CardComponent {}
angular
Breakdown
1
select="[header]"
Targets elements that have the 'header' attribute for this specific projection slot.
2
<ng-content></ng-content>
The default catch-all slot for any content that doesn't match a specific selector.