Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.une projection de contenu

Si vous avez appris Angular JS avant de passer à Angular, vous connaissez peut-être le terme transclusion. D’un autre côté, si vous n’avez aucune idée de ce qu’est la transclusion, le nouveau nom de celle-ci dans Angular est la projection de contenu, et c’est ce que nous allons couvrir dans cet article.

La projection de contenu consiste à passer une partie de l’arborescence DOM d’un composant parent à un composant enfant.

Il est parfait pour créer des composants réutilisables tels que des boîtes de dialogue, des modaux, des onglets, etc.

Voici un exemple où je souhaite créer une fenêtre contextuelle avec un contenu personnalisable, et je voudrais « passer » ce contenu à la fenêtre contextuelle comme suit:

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

Notez que je passe également un titre en entrée à ce composant. Maintenant, par défaut, le code ci-dessus ne projetterait pas le contenu. Pour que la projection de contenu se produise, nous devons ajouter la directive ng-content quelque part dans le modèle du composant enfant :

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-content fonctionne très bien comme router-outlet: C’est une directive qui indique où le contenu dynamique va être chargé.

Une autre façon d’envelopper la projection de contenu est qu’elle va essentiellement « couper et coller » le code HTML généré à partir du composant parent dans le modèle HTML du composant enfant et que le code HTML va être « collé » là où se trouve ng-content.

Une fois que nous avons le code ci-dessus en place, la fenêtre contextuelle s’affiche comme suit:

Vous pouvez trouver le code complet de cet exemple dans ce Stackblitz:

Ce contenu projeté peut-il être dynamique?

Bien sûr, ça peut! Vous pouvez utiliser n’importe quelle liaison de données, directive ou même d’autres composants si vous le souhaitez.

Voici un exemple:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

Et tout cela fonctionne parfaitement bien:

Le code complet de ce deuxième exemple se trouve dans ce Stackblitz:

Que faire si je veux projeter plusieurs choses à des endroits différents?

Je suis content que vous ayez demandé. C’est ce qu’on appelle la projection de contenu à plusieurs emplacements.

Supposons que nous voulons changer notre fenêtre contextuelle afin de pouvoir lui transmettre un corps personnalisé ainsi qu’un pied de page personnalisé.

Nous allons utiliser deux directives ng-content dans ce composant, et la clé est de faire en sorte que ces deux emplacements sélectionnent une partie spécifique du contenu projeté en utilisant la syntaxe suivante:

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

Maintenant, afin de transmettre du contenu à ces emplacements spécifiques, tout ce que j’ai à faire est d’utiliser des balises qui correspondent aux critères de sélection fournis ci-dessus:

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

Notez que j’ai utilisé le corps et le pied de page car ce sont de véritables éléments HTML qui ont du sens dans ce contexte. Pourtant, vous pouvez sélectionner des éléments par classe CSS, nom d’attribut ou tout ce que vous voulez. Pas besoin de le faire exactement comme je l’ai fait ici.Comme vous pouvez le voir, cela fonctionne bien:

div>

J’ai appliqué une couleur différente au pied de page afin que nous puissions voir que le contenu a été transclus dans l’emplacement de droite

Le code complet de cet exemple final peut être trouvé dans ce Stackblitz:

Je m’appelle Alain Chautard. Je suis un expert développeur Google en Angular, ainsi que consultant fondateur et formateur chez Angular Training où j’aide les équipes de développement à apprendre et à maîtriser Angular.

Besoin d’aide avec Angular? Prenons le temps de parler.

Si vous avez apprécié ce post, veuillez applaudir ou le partager. Votre aide est toujours appréciée.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.