ng2 - Différence entre les balises ng-container et ng-template

Question

Quelqu'un peut-il illustrer la différence entre l'utilisation de <ng-container> y <ng-template> éléments ?

Je n'ai pas trouvé de documentation pour NgContainer et je ne comprends pas bien la différence entre une balise de modèle.

Un exemple de code pour chacun d'entre eux serait très utile.

Answer 1

Les deux sont actuellement (2.x, 4.x) utilisés pour regrouper des éléments sans avoir à introduire un autre élément qui sera rendu sur la page (comme par exemple div o span ).

template nécessite toutefois une syntaxe complexe. Par exemple,

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

deviendrait

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

Vous pouvez utiliser ng-container à la place, puisqu'il suit la belle * syntaxe que vous attendez et avec laquelle vous êtes probablement déjà familiarisé.

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

Vous pouvez trouver plus de détails en lisant cette discussion sur GitHub .

---

Notez que dans 4.x <template> est déprécié et est remplacé par <ng-template> .

---

Utilisez

• <ng-container> si vous avez besoin d'un élément d'aide pour les directives structurelles imbriquées telles que *ngIf o *ngFor ou si vous voulez envelopper plus d'un élément dans une telle directive structurelle ;
• <ng-template> si vous avez besoin d'un "extrait" de vue que vous voulez estampiller à différents endroits en utilisant ngForTemplate , ngTemplateOutlet ou createEmbeddedView() .

Answer 2

ng-template est utilisé pour la directive structurelle comme ng-if , ng-for y ng-switch . Si vous l'utilisez sans la directive structurelle, il ne se passe rien et le fichier sera rendu.

ng-container est utilisé lorsque vous ne disposez pas d'un wrapper ou d'un conteneur parent approprié. Dans la plupart des cas, nous utilisons div o span comme un conteneur, mais dans ce cas, lorsque nous voulons utiliser plusieurs directives structurelles. Mais nous ne pouvons pas utiliser plus d'une directive structurelle sur un élément, dans ce cas, ng-container peut être utilisé comme un conteneur

Answer 3

ng-template
Le site <ng-template> est un élément Angular permettant d'effectuer un rendu HTML. Il n'est jamais affiché directement. A utiliser pour les directives structurelles telles que : ngIf, ngFor, ngSwitch,
Exemple :

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular traduit l'attribut *ngIf en un attribut <ng-template> enveloppé autour de l'élément hôte, comme ceci.

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
À utiliser comme élément de regroupement lorsqu'il n'y a pas d'élément hôte approprié.
Exemple :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

Cela ne fonctionnera pas. Car certains éléments HTML exigent que tous les enfants immédiats soient d'un type spécifique. Par exemple, l'élément <select> nécessite des enfants. Vous ne pouvez pas envelopper les options dans une conditionnelle ou un <span> .

Essayez ceci :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

Ça va marcher.

Plus d'informations : Directive structurelle Angular

Answer 4

ng-template show true value.

<ng-template>
    This is template block
</ng-template>

Sortie :

ng-container show without condition also show content.

<ng-container>
    This is container.
</ng-container>

Sortie :
C'est un conteneur.

Answer 5

ng-template comme son nom l'indique, désigne un modèle . En soi, il ne rend rien. Nous pouvons utiliser un ng-container pour fournir un emplacement pour le rendu d'un modèle dynamiquement .

Un autre cas d'utilisation de ng-template est que nous pouvons l'utiliser pour imbriquer plusieurs directives structurelles ensemble. Vous trouverez d'excellents exemples dans cet article de blog : angulaire ng-template/ng-container