📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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>

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>

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.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !