Appearance
Comment utiliser la directive ng-template dans Angular ?
La directive ng-template
est utilisée dans Angular pour définir un contenu qui ne sera pas rendu immédiatement, mais qui pourra être utilisé plus tard comme modèle de rendu. Cela peut être utile dans plusieurs situations, telles que :
Créer un modèle de rendu qui sera utilisé plusieurs fois dans une vue. Au lieu de répéter le même code HTML plusieurs fois, vous pouvez définir un modèle une seule fois et l'utiliser à plusieurs endroits.
Créer un modèle de rendu qui ne sera utilisé que si certaines conditions sont remplies. Par exemple, vous pouvez définir un modèle qui sera utilisé si un utilisateur est connecté, et un autre modèle qui sera utilisé s'il est déconnecté.
Voici comment utiliser la directive ng-template
dans Angular :
- Dans votre template HTML, définissez un conteneur qui sera utilisé comme modèle de rendu en utilisant la directive
ng-template
. Vous pouvez donner un nom à ce modèle en utilisant l'attributng-template
:
html
<ng-template #myTemplate>
Mon modèle de rendu
</ng-template>
- Pour utiliser ce modèle de rendu, vous pouvez utiliser la directive
ngTemplateOutlet
et lui passer le modèle en utilisant la référence définie précédemment :
html
<div *ngTemplateOutlet="myTemplate"></div>
Cela permettra de rendre le contenu du modèle dans la div.
Vous pouvez également passer des contextes à votre modèle en utilisant l'attribut ngTemplateOutletContext
. Par exemple :
html
<ng-template #myTemplate let-name="name">
Bonjour {{name}}
</ng-template>
<div *ngTemplateOutlet="myTemplate; context: {name: 'John'}"></div>
Cela permettra de rendre "Bonjour John" dans la div.
Il est également possible d'utiliser la directive ng-container
avec ngTemplateOutlet
pour rendre le modèle dans un conteneur qui n'ajoutera pas de nœud HTML supplémentaire à l'arbre DOM. Cela peut être utile lorsque vous ne voulez pas ajouter de nœuds HTML supplémentaires à votre vue.
html
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>