<ng-container> vs <template>

Question

ng-container is mentioned in Angular 2 documentation but there is no explanation how it works and what are use cases.

It is particularly mentioned in ngPlural and ngSwitch directives.

Does <ng-container> do the the same thing as <template>, or it depends whether a directive was written to use one of them?

Are

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

and

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

supposed to be the same?

How do we choose one of them?

How can <ng-container> be used in custom directive?

Answer 1

Edit : Now it is documented

<ng-container> to the rescue

The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

(...)

The <ng-container> is a syntax element recognized by the Angular parser. It's not a directive, component, class, or interface. It's more like the curly braces in a JavaScript if-block:

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

Without those braces, JavaScript would only execute the first statement when you intend to conditionally execute all of them as a single block. The <ng-container> satisfies a similar need in Angular templates.

Original answer:

According to this pull request :

<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.

<ng-container> is rendered as an HTML comment.

so this angular template :

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

will produce this kind of output :

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

So ng-container is useful when you want to conditionaly append a group of elements (ie using *ngIf="foo") in your application but don't want to wrap them with another element.

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

will then produce :

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