Utilisation de la balise <ng-content> pour la projection de contenu dans Angular

La projection de contenu dans Angular est réalisée en utilisant la balise <ng-content>. Cette balise permet d'inclure du contenu dynamique dans un composant, ce qui est crucial quand on souhaite créer des composants réutilisables et configurables.

En pratique, cela est très simple. Par exemple, si vous avez un composant qui doit inclure du contenu variable, vous pouvez utiliser <ng-content> à l'endroit où vous souhaitez que le contenu soit inséré. Ensuite, lorsque vous utilisez ce composant dans votre code, vous pouvez simplement entre les balises d'ouverture et de fermeture de votre composant pour transmettre le contenu à insérer.

Voici un exemple de son utilisation :

// Exemple de code dans un composant parent 
<app-mon-composant>
  <p>Ceci est du contenu projeté</p>
</app-mon-composant>

// Exemple de code dans le composant enfant
<div>
  <h1>Mon Composant</h1>
  <ng-content></ng-content> <!-- Le contenu du composant parent sera affiché ici -->
</div>

Dans cet exemple, le contenu entre les balises <app-mon-composant> est passé au composant 'MonComposant' et placé là où la balise <ng-content> est localisée.

Maintenant, pour les bonnes pratiques, il est important de noter que <ng-content> ne crée pas de contexte de données. Cela signifie que tout ce que vous projetez aura accès au contexte de données du composant parent, et non à celui du composant qui utilise <ng-content>. C'est un aspect important à garder à l'esprit lors de la conception de vos composants pour éviter toute confusion.

Par ailleurs, il convient de noter que les autres balises mentionnées dans les options erronées de la question, telles que <ng-container> et <ng-template>, ont aussi leurs propres usages spécifiques dans Angular. En particulier, <ng-template> est utilisée pour le rendu conditionnel, et <ng-container> est un élément de groupe qui n'affecte pas le rendu et le CSS. Même si ces balises sont utiles, elles ne servent pas pour la projection de contenu.