Angular

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 :

  1. 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'attribut ng-template :
html
<ng-template #myTemplate>
  Mon modèle de rendu
</ng-template>
<ng-template #myTemplate>
  Mon modèle de rendu
</ng-template>
  1. 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>
<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>
<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>
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>