<ng-container> vs <template>

ng-container est mentionné dans la documentation Angular 2 mais il n'y a aucune explication sur son fonctionnement et quels sont les cas d'utilisation.

Il est notamment mentionné dans les directives ngPluralet ngSwitch.

Est- <ng-container>ce que cela fait la même chose que <template>, ou cela dépend si une directive a été écrite pour utiliser l'un d'entre eux?

Sont

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

et

<template [ngPluralCase]="'=0'">there is nothing</template>

censé être le même?

Comment choisissons-nous l'un d'entre eux?

Comment peut-il <ng-container>être utilisé dans une directive personnalisée?

Edit: Maintenant, il est documenté

<ng-container> à la rescousse

Angular  <ng-container> est un élément de regroupement qui n'interfère pas avec les styles ou la mise en page car Angular ne le met pas dans le DOM.

(...)

Le  <ng-container> est un élément de syntaxe reconnu par l'analyseur angulaire. Ce n'est pas une directive, un composant, une classe ou une interface. C'est plus comme les accolades dans un bloc if JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

Sans ces accolades, JavaScript n'exécuterait la première instruction que lorsque vous avez l'intention de les exécuter toutes sous forme d'un seul bloc. Le  <ng-container> répond à un besoin similaire dans les modèles angulaires.

Réponse originale:

Selon cette pull request :

<ng-container> est un conteneur logique qui peut être utilisé pour regrouper des nœuds mais qui n'est pas rendu dans l'arborescence DOM en tant que nœud.

<ng-container> est rendu sous forme de commentaire HTML.

donc ce gabarit angulaire:

<div>
    <ng-container>foo</ng-container>
<div>

produira ce type de sortie:

<div>
    <!--template bindings={}-->foo
<div>

C'est donc ng-containerutile lorsque vous souhaitez ajouter conditionnellement un groupe d'éléments (c'est-à-dire en utilisant *ngIf="foo") dans votre application mais que vous ne voulez pas les envelopper avec un autre élément .

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

produira alors:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

La documentation ( https://angular.io/guide/template-syntax#!#star-template ) donne l'exemple suivant. Disons que nous avons un code de modèle comme celui-ci:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

Avant qu'il ne soit rendu, il sera "désucléé". Autrement dit, la notation astérisque sera transcrite en notation:

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

Si 'currentHero' est vrai, cela sera rendu comme

<hero-detail> [...] </hero-detail>

Mais que faire si vous voulez une sortie conditionnelle comme celle-ci:

<h1>Title</h1><br>
<p>text</p>

.. et vous ne voulez pas que la sortie soit enveloppée dans un conteneur.

Vous pouvez écrire la version déshydratée directement comme ceci:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

Et cela fonctionnera très bien. Cependant, maintenant nous avons besoin de ngIf pour avoir des crochets [] au lieu d'un astérisque *, et c'est déroutant ( https://github.com/angular/angular.io/issues/2303 )

Pour cette raison, une notation différente a été créée, comme ceci:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

Les deux versions produiront les mêmes résultats (seules les balises h1 et p seront rendues). Le second est préféré car vous pouvez utiliser * ngIf comme toujours.

Les cas d'utilisation d'IMO ng-containersont de simples remplacements pour lesquels un modèle / composant personnalisé serait excessif. Dans le document de l'API, ils mentionnent ce qui suit

utiliser un ng-container pour regrouper plusieurs nœuds racine

et je suppose que c'est de ça qu'il s'agit: regrouper des choses.

Sachez que la ng-containerdirective tombe au lieu d'un modèle où sa directive enveloppe le contenu réel.

Un cas d'utilisation pour cela lorsque vous voulez utiliser une table avec * ngIf et * ngFor - Car mettre un div dans td / th entraînera un mauvais comportement de l'élément table -. Je fait face à ce problème et qui était la réponse.