estus estus - 1 month ago 47
TypeScript Question

Angular 2 ng-container

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

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>