Angular - 5.13-Projeter du contenu dans des composants avec ng-content

Jusqu'ici, pour transmettre des données à un composant, nous avons utilisé la liaison de propriété avec @Input(). Mais il existe une autre situation : quand on veut passer non pas une simple valeur, mais tout un bloc de HTML depuis l'extérieur d'un composant. C'est le rôle de ng-content, le mécanisme de projection de contenu d'Angular. Par défaut, tout HTML placé entre la balise d'ouverture et la balise de fermeture d'un composant est perdu : Angular le retire purement et simplement du DOM, sans erreur.

Marquer l'emplacement avec ng-content

Pour qu'Angular affiche ce contenu, il faut indiquer où l'insérer dans le template du composant en y plaçant la directive <ng-content></ng-content>. Elle agit comme un point d'ancrage : Angular vient y projeter ce qu'il trouve entre les balises du composant. Exemple avec un ServerElementComponent jouant le rôle de panneau :

<!-- server-element.component.html -->
<div class="panel">
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>

<!-- usage côté parent -->
<app-server-element>
  <p><strong>Nom :</strong> serveur de test</p>
</app-server-element>

• l'enveloppe (style, structure, layout) appartient au composant ;
• le contenu varie à chaque utilisation, fourni par le parent ;
• parfait pour des composants génériques : panneau, carte, onglets, fenêtre modale ;
• contrairement à un @Input() qui recevrait du HTML, ng-content n'échappe pas la structure HTML — c'est la solution adaptée pour projeter du contenu riche en toute sécurité, Angular vérifiant lui-même la projection.

ng-content est ainsi la solution propre et prévue pour projeter du contenu structuré dans un composant réutilisable, et compléter intelligemment ce que @Input() permet déjà pour les valeurs simples.