X'inhu projection tal-kontenut b'ng-content?

Question

Accepted Answer

**Projection tal-kontenut** tippermetti lill-komponent li jaċċetta u texxendir **markup li jgħaddi mill-parent tiegħu** — posizjonat permezz ta' ``. Dik ir-riħa li tibni komponenti wrapper flessibli u ri-utilisabbli (cards, dialogs, layouts) li l-kontenut intern tiegħu huwa kkontrollat mill-consumer. (Huwa l-ekwivalent ta' Angular għal Vue/web-component slots u `children` ta' React.) ## Projection ta' slot wieħed ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` Il-card jipprovdi l-wrapper stylet; il-parent jiddeċiedi x'jidħol ġo — ħafna aktar flessibbli milli tgħoddi strings permezz ta' `@Input`. ## Projection ta' multi-slot b'select ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` L-attribut `select` (seleċċjonatur CSS — attribut, class, jew tag) jirruott kull parti ta' kontenut projettat għall-slot `` t-tajba, jippermetti layouts multi-region. ## Il-kontenut projettat iżżomm il-kuntest oriġinali tiegħu ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Għaliex huwa importanti Projection tal-kontenut huwa l-ċavetta għabbin komponenti UI **ri-utilisabbli u komposabbli** f'Angular — cards, modals, tabs, layouts, u kwalunkwe "shell" fejn il-consumer jipprovdi l-kontenut intern. Bedunha, komponenti jkunu rigid (konfigurabbli biss permezz ta' inputs); b' `` (u `select` għal slots multipli), siru kontejners flessibbli, li huwa essenzjali għall-design systems u libreriji ta' komponenti kondiviża.