Cet article décrit comment utiliser la projection de contenu pour créer des composants flexibles et réutilisables.
La projection de contenu est une méthode de communication entre composant. Avec cette méthode, vous pouvez projeter (transmettre) un morceau de template HTML depuis un composant, vers un autre composant.
Pourquoi utiliser la projection de contenu ?
La projection de contenu est très intéressante pour créer des composants réutilisables, à contenu variable.
Dans quel cas préférer la projection de contenu à un @Input ? C'est assez simple :
@Input transmet une variable à un élément enfant, tandis que la projection de contenu passe un morceau de DOM. Tout simplement.
Projection de contenu à un seul emplacement
Avec ce type de projection de contenu, un composant reçoit un seul morceau de DOM. C'est la forme la plus courante et la plus élémentaire de projection de contenu.
Vous pouvez tester très rapidement par vous-même ! Pour commencer, créez un composant.
Dans le template de votre composant, ajoutez une balise ng-content à l'endroit où vous souhaitez que le contenu s'affiche.
1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component,
template: `
<h3>Ce composant affiche du contenu projeté !</h3>
<ng-content></ng-content>
`
})
export class MyComponent {}
my-component.component.ts
Désormais vous pouvez transmettre du contenu dans le composant au moment ou vous l'appelez via ses balises, comme ceci :
1
2
3
<app-my-component>
<p>Ce message apparaîtra dans le template de my-component !</p>
</app-my-component>
app.component.html
Et voici le résultat que vous obtiendrez en affichant le composant App :
Résultat affiché
Au lieu de placer les balises vides de votre composant MyComponent, vous mettez du HTML à l'intérieur.
Ce HTML remplacera la balise ng-content pendant l'exécution.
MyComponent est donc un composant réutilisable, qui prend une partie de son template en paramètre d'entrée !
Projection de contenu multi-slots
Un composant peut avoir plusieurs emplacements. Lorsque c'est le cas, vous devez nommer ces emplacements et spécifier vers quel emplacement le contenu va être projeté.
Exemple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component,
template: `
<h3>Projection à plusieurs emplacements</h3>
<h4>Première projection:</h4>
<ng-content></ng-content>
<h4>Seconde projection:</h4>
<ng-content select="[second]"></ng-content>
`
})
export class MyComponent {}
my-component.component.ts
Vous remarquez qu'on a placé 2 balises ng-content ce qui représente 2 emplacements dans lesquels on peut projeter du template.
1
2
3
4
5
6
<app-my-component>
<p second>
Je suis projeté dans la 2ème section !
</p>
<p>La première section est pour moi !</p>
</app-my-component>
app.component.html
Ici vous pouvez voir comment on cible l'emplacement voulu au moment d'appeler les balises du composant. Et le résultat obtenu est le suivant :
Résultat affiché
Tout simplement !
Projection conditionnelle du contenu
Si votre composant doit projeter le contenu de manière conditionnelle ou projeter le contenu plusieurs fois, vous devez configurer ce composant pour qu'il accepte un élément ng-template contenant le contenu que vous souhaitez restituer de manière conditionnelle.
L'utilisation d'un élément ng-content dans ces cas n'est pas recommandée, car lorsque le parent d'un composant fournit le contenu, ce contenu est toujours initialisé, même si le composant enfant ne définit pas d'élément ng-content ou si ce ng-content est à l'intérieur d'une instruction *ngIf.
C'est assez spécifique, si vous voulez en savoir plus allez voir cet extrait de doc Angular
Conclusion
Voilà c'est tout pour la projection de contenu, j'espère que cela vous sera utile ! N'hésitez pas à prendre le temps si vous ne comprenez pas du premier coup. C'est moins difficile qu'il n'y parait, et après quelques utilisations vous serez à l'aise avec le sujet.
Vous pouvez laissez un commentaire si vous avez des idées d'améliorations pour cet article !
Auteur
