Angular
Projection de Contenu

La balise <ng-content>

Plutôt que de passer des données via @Input(), on peut passer directement du code HTML à l'intérieur des balises d'un composant enfant. L'enfant choisira où afficher ce HTML grâce à <ng-content>. L'équivalent React est props.children.

Le Composant Parent

Le parent écrit du HTML à l'intérieur des balises <app-card-props> de l'enfant.

<app-card-props>
  <h3>Alice Dupont</h3>
  <p>alice@example.com</p>
</app-card-props>
Changer l'utilisateur projeté :
Carte Utilisateur
AppCardProps
Zone <ng-content>

Alice Dupont

Directrice
Design structuré par l'Enfant. Contenu fourni par le Parent.

L'avantage du ng-content

Cela permet de créer des composants conteneurs très flexibles (comme des Modales, des Cartes, des Accordéons). L'enfant s'occupe de la structure fixe (les bords, les couleurs, le titre général), et le parent injecte le contenu qu'il souhaite au centre.

Le Code Source Complet

import { Component } from '@angular/core';
import { EnfantComponent } from './enfant.component';

@Component({
  selector: 'app-parent',
  imports: [EnfantComponent],
  template: `
    <h3>Je suis le Parent, je fournis le contenu !</h3>
    
    <!-- J'injecte du HTML entre les balises de l'enfant -->
    <app-enfant>
      <h1>Titre Géant</h1>
      <p>Un paragraphe écrit par le parent.</p>
      <button>Un bouton parent</button>
    </app-enfant>
  `
})
export class ParentComponent {}
import { Component } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `
    <div class="ma-carte-magnifique">
      <div class="header-fixe">EnTête Fixe</div>

      <!-- L'espace réservé pour afficher le HTML du parent -->
      <ng-content></ng-content>

      <div class="footer-fixe">Pied Fixe</div>
    </div>
  `
})
export class EnfantComponent {}