vs
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?
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>
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.
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.
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.
참고URL : https://stackoverflow.com/questions/39547858/ng-container-vs-template
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?
Edit : Now it is documented
<ng-container>to the rescueThe 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>
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.
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.
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.
참고URL : https://stackoverflow.com/questions/39547858/ng-container-vs-template
'Programing' 카테고리의 다른 글
| 파이썬에서 인터페이스를 어떻게 구현합니까? (0) | 2020.06.25 |
|---|---|
| es6 Arrow Functions에서 언제 'return'을 사용해야합니까? (0) | 2020.06.25 |
| FromBody와 FromUri를 지정해야하는 이유는 무엇입니까? (0) | 2020.06.25 |
| IEnumerable (0) | 2020.06.25 |
| SQLAlchemy : 실제 쿼리 인쇄 (0) | 2020.06.25 |