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?
This question is related to
angular
typescript
angular2-template
A use case for it when you want to use a table with *ngIf and *ngFor - As putting a div in td/th will make the table element misbehave -. I faced this problem and that was the answer.
Imo use cases for ng-container
are simple replacements for which a custom template/component would be overkill. In the API doc they mention the following
use a ng-container to group multiple root nodes
and I guess that's what it is all about: grouping stuff.
Be aware that the ng-container
directive falls away instead of a template where its directive wraps the actual content.
In my case it acts like a <div>
or <span>
however even <span>
messes up with my AngularFlex styling but ng-container
doesn't.
The documentation (https://angular.io/guide/template-syntax#!#star-template) gives the following example. Say we have template code like this:
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
Before it will be rendered, it will be "de-sugared". That is, the asterix notation will be transcribed to the notation:
<template [ngIf]="currentHero">
<hero-detail [hero]="currentHero"></hero-detail>
</template>
If 'currentHero' is truthy this will be rendered as
<hero-detail> [...] </hero-detail>
But what if you want an conditional output like this:
<h1>Title</h1><br>
<p>text</p>
.. and you don't want the output be wrapped in a container.
You could write the de-sugared version directly like so:
<template [ngIf]="showContent">
<h1>Title</h1>
<p>text</p><br>
</template>
And this will work fine. However, now we need ngIf to have brackets [] instead of an asterix *, and this is confusing (https://github.com/angular/angular.io/issues/2303)
For that reason a different notation was created, like so:
<ng-container *ngIf="showContent"><br>
<h1>Title</h1><br>
<p>text</p><br>
</ng-container>
Both versions will produce the same results (only the h1 and p tag will be rendered). The second one is preferred because you can use *ngIf like always.
Source: Stackoverflow.com