<contêiner> vs <modelo>

ng-container é mencionado na documentação do Angular 2, mas não há explicação sobre como ele funciona e quais são os casos de uso.

É particularmente mencionado em ngPlurale ngSwitchdirectivas.

Faz <ng-container>a mesma coisa que <template>, ou depende se uma diretiva foi escrita para usar uma delas?

Estão

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

e

<template [ngPluralCase]="'=0'">there is nothing</template>

deveria ser o mesmo?

Como escolhemos um deles?

Como pode <ng-container>ser usado na diretiva personalizada?

Edit: Agora está documentado

<ng-container> para o resgate

O Angular  <ng-container> é um elemento de agrupamento que não interfere nos estilos ou no layout, porque o Angular não o coloca no DOM.

(...)

O  <ng-container> é um elemento de sintaxe reconhecido pelo analisador Angular. Não é uma diretiva, componente, classe ou interface. É mais como as chaves em um bloco if do JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

Sem essas chaves, o JavaScript só executaria a primeira instrução quando você pretender executar todas elas condicionalmente como um único bloco. Os  <ng-container> satisfaz uma necessidade semelhante em modelos angular.

Resposta original:

De acordo com esta solicitação de recebimento :

<ng-container> é um contêiner lógico que pode ser usado para agrupar nós, mas não é renderizado na árvore DOM como um nó.

<ng-container> é renderizado como um comentário HTML.

então este modelo angular:

<div>
    <ng-container>foo</ng-container>
<div>

produzirá este tipo de saída:

<div>
    <!--template bindings={}-->foo
<div>

Portanto, ng-containeré útil quando você deseja anexar condicionalmente um grupo de elementos (ou seja, usar *ngIf="foo") em seu aplicativo, mas não deseja agrupá-los com outro elemento .

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

irá então produzir:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

A documentação ( https://angular.io/guide/template-syntax#!#star-template ) fornece o seguinte exemplo. Digamos que temos um código de modelo como este:

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

Antes de ser processado, será "sem açúcar". Ou seja, a notação asterix será transcrita para a notação:

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

Se 'currentHero' for verdade, isso será renderizado como

<hero-detail> [...] </hero-detail>

Mas e se você quiser uma saída condicional como esta:

<h1>Title</h1><br>
<p>text</p>

.. e você não deseja que a saída seja embrulhada em um contêiner.

Você pode escrever a versão sem açúcar diretamente assim:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

E isso vai funcionar bem. No entanto, agora precisamos que ngIf tenha colchetes [] em vez de um asterisco *, e isso é confuso ( https://github.com/angular/angular.io/issues/2303 )

Por esse motivo, uma notação diferente foi criada, assim:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

Ambas as versões produzirão os mesmos resultados (somente a tag h1 ep será renderizada). O segundo é o preferido, porque você pode usar * ngIf como sempre.

Os casos de uso do Imo ng-containersão substituições simples para as quais um modelo / componente personalizado seria um exagero. No documento da API, eles mencionam o seguinte

use um ng-container para agrupar vários nós raiz

e acho que é disso que se trata: agrupar coisas.

Esteja ciente de que a ng-containerdiretiva desaparece em vez de um modelo em que sua diretiva agrupa o conteúdo real.

Um caso de uso para isso quando você deseja usar uma tabela com * ngIf e * ngFor - Como colocar uma div em td / th fará com que o elemento da tabela se comporte mal -. Eu enfrentei esse problema e essa foi a resposta.