Projeksioni i përmbajtjes lejon një komponent të pranojë dhe të shfaqë shënimet e kaluar nga komponenti prind — të vendosura përmes <ng-content>. Këtu është se si ndërton komponentë përmbështjellëse fleksibël dhe të përdorshme sërish (karta, dialogje, paraqitje) - përmbajtja e brendshme e kontrolluarmë konsumatorin. (Është ekuivalenti i Angular për sllotet e Vue/web-component dhe children të React.)
// 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>
Karta ofron përmbështjellësin me stil; komponenti prind vendos se çfarë vazihdej brenda — shumë më fleksibël se kalimi i vargrave përmes @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>
Atributi select (një zgjedhës CSS — atribut, klasë, ose etiketë) drejton secilën pjesë të përmbajtjes të projektuar në slot-in e duhur <ng-content>, duke mundësuar paraqitje me shumë rajone.
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
Projeksioni i përmbajtjes është çelësi për ndërtimin e komponentëve të përdorshëm sërish, të komponueshëm në Angular — karta, modale, skeda, paraqitje, dhe çdo "guaskë" ku konsumatori siguron përmbajtjen e brendshme.
Pa të, komponentët do të ishin të ngurtë (vetëm të konfigurueshëm përmes hyrjesh); me <ng-content> (dhe select për shumë slote), ato bëhen kontejnerë fleksibël, çka është thelbësore për sistemet e dizajnit dhe biblioteka të komponentëve të ndara.