ng-template
El <ng-template>
es un elemento angular para renderizar HTML. Nunca se muestra directamente. Úselo para directivas estructurales como: ngIf, ngFor, ngSwitch, ..
Ejemplo :
<div *ngIf="hero" class="name">{{hero.name}}</div>
Angular traduce el atributo * ngIf en un <ng-template>
elemento, envuelto alrededor del elemento host, como este.
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>
ng-container Se
utiliza como elemento de agrupación cuando no hay un elemento anfitrión adecuado.
Ejemplo:
<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>
Esto no funcionará. Porque algunos elementos HTML requieren que todos los hijos inmediatos sean de un tipo específico. Por ejemplo, el <select>
elemento requiere hijos. No puede envolver las opciones en condicional o <span>
.
Prueba esto :
<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>
Esto funcionará.
Más información: Directiva estructural angular
@Input()
s.*
es más conveniente por supuesto. Pero tienes razón,<ng-container>
se introdujo porque las diferencias de sintaxis causaron bastante confusión.