ng2 - Diferença entre as tags ng-container e ng-template

Alguém pode ilustrar a diferença entre usar os elementos <ng-container>e <ng-template>?

Não consegui encontrar a documentação NgContainere não entendo muito bem a diferença entre a tag de modelo.

Um exemplo de código de cada um ajudaria muito.

Ambos são no momento (2.x, 4.x) usados ​​para agrupar elementos sem ter que introduzir outro elemento que será renderizado na página (como divou span).

template, no entanto, requer uma sintaxe desagradável. Por exemplo,

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

se tornaria

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

Você pode usar, uma ng-containervez que segue a *sintaxe legal que você espera e provavelmente já está familiarizado.

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

Você pode encontrar mais detalhes lendo esta discussão no GitHub .

Observe que no 4.x <template>está obsoleto e foi alterado para <ng-template>.

Usar

• <ng-container>se você precisar de um elemento auxiliar para diretivas estruturais aninhadas como *ngIfou, *ngForou se quiser envolver mais de um elemento dentro de uma diretiva estrutural;
• <ng-template>se você precisa de uma visão "snippet" que pretende estampar em vários lugares usando ngForTemplate, ngTemplateOutletou createEmbeddedView().

ng-templateé usado para a diretiva estrutural como ng-if, ng-fore ng-switch. Se você usá-lo sem a diretiva estrutural, nada acontece e ele será renderizado.

ng-containeré usado quando você não tem um wrapper ou contêiner pai adequado. Na maioria dos casos, estamos usando divou spancomo um contêiner, mas nesses casos, queremos usar várias diretivas estruturais. Mas não podemos usar mais de uma diretiva estrutural em um elemento, nesse caso, ng-containerpode ser usado como um contêiner

ng-template
O <ng-template>é um elemento angular para renderizar HTML. Nunca é exibido diretamente. Use para diretivas estruturais como: ngIf, ngFor, ngSwitch, ..
Exemplo :

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

Angular traduz o atributo * ngIf em um <ng-template>elemento, enrolado ao redor do elemento host, assim.

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

ng-container
Use como um elemento de agrupamento quando não houver um elemento de host adequado.
Exemplo:

<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>

Isso não vai funcionar. Porque alguns elementos HTML requerem que todos os filhos imediatos sejam de um tipo específico. Por exemplo, o <select>elemento requer filhos. Você não pode envolver as opções em uma condicional ou a <span>.

Experimente isto:

<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>

Isso vai funcionar.

Mais informações: Diretiva Estrutural Angular

ng-template mostra o valor verdadeiro.

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

Resultado:

ng-container show sem condição também mostra conteúdo.

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

Saída:
este é o contêiner.

ng-templatecomo o nome indica, denota um modelo . Por si só, não renderiza nada. Podemos usar um ng-containerpara fornecer um espaço reservado para renderizar um modelo dinamicamente .

Outro caso de uso ng-templateé que podemos usá-lo para aninhar várias diretivas estruturais juntas. Você pode encontrar ótimos exemplos aqui nesta postagem do blog: angular ng-template / ng-container

Em termos simples, ng-containeré como um componente Higher do React , que apenas auxilia na renderização de seus elementos filhos.

ng-templateé basicamente para implementação interna do Angular , em que qualquer coisa dentro do ng-templateé completamente ignorada durante a renderização e basicamente se torna um comentário na fonte de exibição. Isso deve ser usado com as diretivas internas do Angular ngIf, ngSwitchetc.

Eu gosto <ng-container>de separar "lógica" de "marcação" tanto quanto possível nos arquivos Angular .component.html.

exemplo (parcial) para renderizar linhas de uma tabela 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>

Dessa forma, se eu quiser mudar de um HTML <table>para algo diferente, como um monte de <div>com estilo flexbox, não preciso "esculpir" a lógica do loop (ou arrisco perdê-la completamente) de dentro do <tr>. Também evita que a lógica do loop (ngFor) seja parcialmente obscurecida pelo html normal.