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

ng-template let

Question

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

No pude encontrar documentación para NgContainer y no entiendo la diferencia entre la etiqueta de plantilla.

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

Answer 1

Ambos se utilizan en este momento (2.x, 4.x) para agrupar elementos sin tener que introducir otro elemento que se representará en la página (como div o 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>

En su lugar, puede usar ng-container ya que sigue la sintaxis * agradable que espera y 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á en desuso y se cambia a <ng-template> .

Utilizar

• <ng-container> si necesita un elemento auxiliar para directivas estructurales anidadas como *ngIf o *ngFor o si desea envolver más de un elemento dentro de dicha directiva estructural;
• <ng-template> si necesita una vista "fragmento" que desea estampar en varios lugares usando ngForTemplate , ngTemplateOutlet o createEmbeddedView() .

Answer 2

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

ng-template es básicamente para la implementación interna de Angular , en donde cualquier cosa dentro de la ng-template se ignora por completo mientras se procesa y básicamente se convierte en un comentario en la fuente de vista. Se supone que esto debe usarse con las directivas internas de Angular como ngIf , ngSwitch , etc.

Answer 3

ng-template como su nombre lo indica, denota una plantilla . Por sí solo no representa nada. Podemos usar un ng-container para proporcionar un marcador de posición para representar una plantilla dinámicamente .

Otro caso de uso para ng-template es que podemos usarlo para anidar múltiples directivas estructurales juntas. Puede encontrar excelentes ejemplos aquí en esta publicación de blog: blog.angular-university.io/…

Answer 4

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

ng-container se usa cuando no tiene un contenedor adecuado o un contenedor principal. En la mayoría de los casos, estamos usando div o span como contenedor, pero en esos casos cuando queremos usar múltiples directivas estructurales. Pero no podemos usar más de una directiva estructural en un elemento, en ese caso, ng-container se puede usar como contenedor

Answer 5

ng-template
<ng-template> es un elemento angular para renderizar HTML. Nunca se muestra directamente. Uso para directivas estructurales como: ngIf, ngFor, ngSwitch, ..
Ejemplo :

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular traduce el atributo * ngIf en un elemento <ng-template> , envuelto alrededor del elemento host, de esta manera.

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
Úselo como elemento de agrupación cuando no haya un elemento host 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á. Debido a que algunos elementos HTML requieren que todos los elementos secundarios inmediatos sean de un tipo específico. Por ejemplo, el elemento <select> requiere hijos. No puede ajustar las opciones en un condicional o un <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

Answer 6

ng-template muestra el verdadero valor.

<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 el contenedor.