ng2: diferencia entre las etiquetas ng-container y ng-template

¿Alguien puede ilustrar la diferencia entre usar <ng-container>y <ng-template>elementos?

No pude encontrar documentación NgContainery no entiendo bien la diferencia entre la etiqueta de plantilla.

Un ejemplo de código de cada uno sería de gran ayuda.

Ambos se utilizan en este momento (2.x, 4.x) para agrupar elementos sin tener que introducir otro elemento que se renderizará en la página (como divo span).

template, sin embargo, requiere una sintaxis desagradable. Por ejemplo,

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

se convertiría

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

Puede usarlo ng-containeren su lugar, ya que sigue la agradable *sintaxis que espera y con la que probablemente ya esté familiarizado.

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

Puede encontrar más detalles leyendo esta discusión en GitHub .

Tenga en cuenta que en 4.x <template>está obsoleto y se cambió a <ng-template>.

Utilizar

• <ng-container>si necesita un elemento auxiliar para directivas estructurales anidadas como *ngIfo *ngForsi desea envolver más de un elemento dentro de dicha directiva estructural;
• <ng-template>si necesita una visión "fragmento de código" que desea estampar en varios lugares utilizando ngForTemplate, ngTemplateOutleto createEmbeddedView().

ng-templatese utiliza para la directiva estructural como ng-if, ng-fory ng-switch. Si lo usa sin la directiva estructural, no pasa nada y se procesará.

ng-containerse usa cuando no tiene una envoltura adecuada o un contenedor principal. En la mayoría de los casos, usamos divo spancomo contenedor, pero en tales casos queremos usar múltiples directivas estructurales. Pero no podemos usar más de una directiva estructural en un elemento, en ese caso, ng-containerse puede usar como contenedor

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

ng-template muestra el valor verdadero.

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

Salida:

ng-container show sin condición también muestra contenido.

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

Salida:
Este es un contenedor.

ng-templatecomo su nombre lo indica, denota una plantilla . Por sí mismo no rinde nada. Podemos usar a ng-containerpara proporcionar un marcador de posición para representar una plantilla de forma dinámica .

Otro caso de uso ng-templatees que podemos usarlo para anidar varias directivas estructurales juntas. Puede encontrar excelentes ejemplos aquí en esta publicación de blog: angular ng-template / ng-container

En términos simples, ng-containeres como un componente superior de React , que solo ayuda en la representación de sus elementos secundarios.

ng-templatees básicamente para la implementación interna de Angular , donde cualquier cosa dentro de ng-templatese ignora por completo mientras se renderiza y básicamente se convierte en un comentario en la fuente de la vista. Se supone que esto se usa con las directivas internas de Angular como ngIf, ngSwitchetc.

Me gusta <ng-container>como una forma de separar "lógica" de "marcado" tanto como sea posible en los archivos Angular .component.html.

Ejemplo (parcial) para representar filas de una tabla html:

        <ng-container *ngFor="let product of products">
          <tr>
            <td></td>
            <td>{{ product.productName }}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.starRating }}</td>
          </tr>
        </ng-container>

De esa manera, si quiero cambiar de un HTML <table>a otra cosa, como un montón <div>con estilo flexbox, no necesito "forjar" la lógica del bucle (o arriesgarme a perderla por completo) desde dentro del <tr>. También evita que la lógica de bucle (ngFor) se oscurezca parcialmente por el html normal.