Angular

Appearance

Comment utiliser la directive ng-content dans Angular ? ​

La directive ng-content dans Angular permet de définir un contenu qui sera inséré dans un composant au moment de son utilisation dans une vue. Cela permet de créer des composants réutilisables qui peuvent s'adapter à différents contextes d'utilisation grâce à leur contenu dynamique.

Voici un exemple de l'utilisation de ng-content :

html
<!-- composant parent -->
<app-mon-composant>
  <p>Contenu dynamique inséré dans le composant</p>
</app-mon-composant>

<!-- composant enfant (app-mon-composant) -->
<div class="container">
  <ng-content></ng-content>
</div>
<!-- composant parent -->
<app-mon-composant>
  <p>Contenu dynamique inséré dans le composant</p>
</app-mon-composant>

<!-- composant enfant (app-mon-composant) -->
<div class="container">
  <ng-content></ng-content>
</div>

Dans cet exemple, le contenu du composant parent (<p>Contenu dynamique inséré dans le composant</p>) sera inséré à l'emplacement de la directive ng-content dans le composant enfant (app-mon-composant). Cela permet de créer un composant réutilisable qui peut afficher différents contenus en fonction de son utilisation.

Il est également possible de définir plusieurs points d'insertion pour le contenu en utilisant les attributs select et ngProjectAs. Par exemple :

html
<!-- composant enfant (app-mon-composant) -->
<div class="container">
  <ng-content select="[header]"></ng-content>
  <ng-content></ng-content>
  <ng-content select="[footer]"></ng-content>
</div>

<!-- utilisation du composant -->
<app-mon-composant>
  <header>En-tête</header>
  <p>Contenu principal</p>
  <footer>Pied de page</footer>
</app-mon-composant>
<!-- composant enfant (app-mon-composant) -->
<div class="container">
  <ng-content select="[header]"></ng-content>
  <ng-content></ng-content>
  <ng-content select="[footer]"></ng-content>
</div>

<!-- utilisation du composant -->
<app-mon-composant>
  <header>En-tête</header>
  <p>Contenu principal</p>
  <footer>Pied de page</footer>
</app-mon-composant>

Dans cet exemple, le contenu du composant parent sera inséré de manière à remplacer les trois points d'insertion définis dans le composant enfant. Le contenu correspondant aux sélecteurs [header] et [footer] sera inséré aux emplacements correspondants, tandis que le reste du contenu sera inséré au troisième emplacement.