Cos'è la content projection con ng-content?

Question

IT Interview Practice · Accepted Answer

**Content projection** consente a un componente di accettare e renderizzare **markup passato dal suo parent** — inserito tramite ``. È il modo per costruire componenti wrapper flessibili e riutilizzabili (card, dialog, layout) il cui contenuto interno è controllato dal consumatore. (È l'equivalente Angular di Vue/web-component slots e `children` di React.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` La card fornisce il wrapper stilizzato; il parent decide cosa va dentro — molto più flessibile che passare stringhe tramite `@Input`. ## Multi-slot projection con select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` L'attributo `select` (un selettore CSS — attributo, classe o tag) instrada ogni pezzo di contenuto proiettato al giusto slot ``, abilitando layout multi-regione. ## Il contenuto proiettato mantiene il suo contesto originale ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Perché è importante Content projection è la chiave per costruire componenti UI **riutilizzabili e componibili** in Angular — card, modal, tab, layout e qualsiasi "shell" dove il consumatore fornisce il contenuto interno. Senza di essa, i componenti sarebbero rigidi (configurabili solo tramite input); con `` (e `select` per slot multipli), diventano contenitori flessibili, il che è essenziale per design system e librerie di componenti condivise.

Single-slot projection

Multi-slot projection con select

Il contenuto proiettato mantiene il suo contesto originale

Perché è importante

Domande correlate