Projekcija vsebine omogoči komponenti sprejeti in prikazati oznako, ki jo posreduje njena nadrejena komponenta — umeštveno prek <ng-content>. To je način, kako zgraditi prožne, ponovno uporabne komponente ovitke (kartice, dialogi, postavitve), katerih notranjo vsebino nadzira potrošnik. (To je Angularjev ekvivalent Vue/web-component slotov in Reactovega children.)
// card.component.ts
@Component({
selector: "app-card",
template: `
<div class="card">
<ng-content></ng-content> <!-- parent's content is projected here -->
</div>
`,
})
export class CardComponent {}
<!-- parent: anything between the tags is projected into <ng-content> -->
<app-card>
<h2>Title</h2>
<p>Any content I want!</p>
</app-card>
Kartica ponuja uslojeni ovoj; nadrejena komponenta odloči, kaj gre v notranjost — veliko bolj prožno kot posredovanje nizov prek @Input.
select@Component({
selector: "app-panel",
template: `
<header><ng-content select="[panel-header]"></ng-content></header>
<main><ng-content></ng-content></main> <!-- default slot -->
<footer><ng-content select="[panel-footer]"></ng-content></footer>
`,
})
export class PanelComponent {}
<app-panel>
<h1 panel-header>My Panel</h1> <!-- goes to the header slot -->
<p>Main body content</p> <!-- goes to the default slot -->
<button panel-footer>OK</button> <!-- goes to the footer slot -->
</app-panel>
Atribut select (CSS selektor — atribut, razred ali oznaka) usmerja vsak kos projicirane vsebine v pravi slot <ng-content>, kar omogoča postavitve z več predeli.
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
Projekcija vsebine je ključna za gradnjo ponovno uporabnih, sestavljenih komponent v Angularjevem ogrodju — kartice, modalne dialoge, zavihke, postavitve in katerikoli »lupino«, kjer potrošnik dobavi notranjo vsebino.
Brez nje bi bili komponenti togikrvi (samo nastavljivi prek vhodov); z <ng-content> (in select za več slotov) postanejo prožni vsebniki, kar je bistveno za sisteme oblikovanja in knjižnice skupnih komponent.