Angular 2. Formularios. Entrega 6: Templates (5). El papel del asterisco '*' en el template

1. El elemento <template>

El asterisco (*) aplicado antes del nombre de las directivas es mas fácil de identificar, sobre todo aquellas que modifican el layout HTML.

Pero con el elemento <template>, tenemos que cambiar el asterico (*) por los corchetes []

1.1. Con NgIf

Por tanto podemos indicar para el NgIf:
-Sin template y con asterisco

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

y con template con corchete y sin asterisco

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

1.2. Con NgSwitch

Lo mismo con NgSwitch, podemos utilizar tanto el asterisco sin template como el template con corchete y sin asterisco. Pero observese que tienen que ir juntos y al final el NgSwitchDefault de cada grupo.

<span [ngSwitch]="toeChoice">

      <!-- with *NgSwitch -->
      <span *ngSwitchCase="'Eenie'">Eenie</span>
      <span *ngSwitchCase="'Meanie'">Meanie</span>
      <span *ngSwitchCase="'Miney'">Miney</span>
      <span *ngSwitchCase="'Moe'">Moe</span>
      <span *ngSwitchDefault>other</span>

      <!-- with <template> -->
      <template [ngSwitchCase]="'Eenie'"><span>Eenie</span></template>
      <template [ngSwitchCase]="'Meanie'"><span>Meanie</span></template>
      <template [ngSwitchCase]="'Miney'"><span>Miney</span></template>
      <template [ngSwitchCase]="'Moe'"><span>Moe</span></template>
      <template ngSwitchDefault><span>other</span></template>

    </span>

1.3. Con NgSwitch

Lo mismo podemos decir con el NgFor, primero con el asterisco:

<hero-detail template="ngFor let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>

Y con template con corchetes (Ojo: Observese la transformación of ->[ngForOF] y trackBy: -> [ngForTrackBy] 

<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
  <hero-detail [hero]="hero"></hero-detail>
</template>