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.
<template>
quand il est utilisé sans directives.<template>
produirait juste<!--template bindings={}-->
dans ce cas.