javascript / intermediate
Snippet
Multi-Slot Content Projection
Content Projection ermöglicht es Komponenten, externes HTML zu empfangen und zu rendern. Mit dem 'select'-Attribut bei ng-content lassen sich mehrere Slots definieren, um die Position der Inhalte zu steuern.
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
Erklärung
1
select="[header]"
Zielt auf Elemente mit dem Attribut 'header' für diesen spezifischen Projektions-Slot ab.
2
<ng-content></ng-content>
Der Standard-Slot für alle Inhalte, die keinem spezifischen Selektor entsprechen.