La projection de contenu dans Angular : guide rapide

Introduction #

La projection de contenu dans Angular permet de transmettre du contenu d’un composant parent à un composant enfant, ce qui rend les composants plus flexibles et réutilisables. Pour cela, on utilise la directive <ng-content>.

Dans cet article, nous allons voir un exemple simple, un cas d’utilisation plus avancé, puis résumer les points essentiels.

Exemple de base #

Imaginons que nous voulions afficher un message de confirmation dans un composant, et que ce message puisse être personnalisé.

<!-- Composant de confirmation (app-confirmation) -->
<div>
    <h1>Confirmation</h1>
    <ng-content />

     <div class="footer">
        <button (click)="confirmAction()">Confirm</button>
    </div>
</div>

<!-- Composant parent -->
<app-confirmation>
    <p> Do you want to confirm this action? </p> <!-- Ce contenu sera projeté dans l’emplacement ng-content -->
</app-confirmation>

Exemple avancé : projection multi-emplacements #

Reprenons le même composant de confirmation, mais ajoutons cette fois un pied de page personnalisé.

<!-- Composant de confirmation (app-confirmation) -->
<div>
    <h1>Confirmation</h1>
    <ng-content select="body"/>

     <div class="footer">
        <ng-content select="footer" />
    </div>
</div>

<!-- Composant parent -->
<app-confirmation>
    <body>
        <p> Do you want to confirm this action? </p>
    </body>
    <footer>
        <button (click)="cancel()">Cancel</button>
        <button (click)="confirmAction()">Confirm</button>
    </footer>    
</app-confirmation>

J’ai utilisé body et footer, mais vous pouvez sélectionner des éléments par classe CSS, nom d’attribut ou tout autre critère de votre choix.

Conclusion #

La projection de contenu est une fonctionnalité puissante qui rend les composants Angular plus réutilisables et dynamiques. Que vous ayez besoin d’un emplacement simple ou de plusieurs, <ng-content> vous permet de créer des composants très flexibles.

Pour davantage de flexibilité, vous pouvez également utiliser ngTemplateOutlet afin d’afficher dynamiquement des templates en fonction de conditions ou d’entrées externes, et ainsi personnaliser les composants de façon avancée.