angular - <ng-container> vs <template>

Question

ng-container is mentioned in the official documentation but I'm still trying to understand how it works and what are use cases.

It is particularly mentioned in ngPlural and ngSwitch directives.

Does <ng-container> do the same thing as <template> or does it depend on 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 a custom directive?

Answer 1

Edit 2 : It is NOT documented anymore !

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>