Qu'est-ce que la projection de contenu avec ng-content ?

Question

Accepted Answer

**La projection de contenu** permet à un composant d'accepter et de rendre **le balisage passé par son parent** — placé via ``. C'est comment vous construisez des composants enveloppes flexibles et réutilisables (cartes, dialogues, mises en page) dont le contenu interne est contrôlé par le consommateur. (C'est l'équivalent d'Angular des slots Vue/web-component et du `children` de React.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` La carte fournit l'enveloppe stylisée ; le parent décide ce qui va à l'intérieur — bien plus flexible que de passer des chaînes de caractères via `@Input`. ## Multi-slot projection avec select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` L'attribut `select` (un sélecteur CSS — attribut, classe ou balise) achemine chaque morceau de contenu projeté vers le bon slot ``, permettant des mises en page multi-régions. ## Le contenu projeté conserve son contexte original ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Pourquoi c'est important La projection de contenu est la clé pour construire des composants UI **réutilisables et composables** dans Angular — cartes, modales, onglets, mises en page, et tout « shell » où le consommateur fournit le contenu interne. Sans elle, les composants seraient rigides (configurables uniquement via des inputs) ; avec `` (et `select` pour plusieurs slots), ils deviennent des conteneurs flexibles, ce qui est essentiel pour les design systems et les bibliothèques de composants partagés.