ng-container or ng-template, that is the question.

When we use a structural directive as *ngIf, we use a sugar such as :

<div *ngIf="true">Hello World !</div>

Before it will be rendered, it will be "de-sugared" :

<ng-template [ngIf]="true"><div>Hello World</div></ng-template>​

 

 

But, if you just want to show "Hello World" without to wrap it with another element in the DOM, you can't use structural directive *ngIf on a <ng-template>. You should use directly :

<ng-template [ngIf]="true">Hello World</ng-template>​ that is rendered as a comment :

<!--template bindings={
  "ng-reflect-ng-if": "true"
}-->
Hello World

 

It's confusing, and Angular team droped the <ng-template []> notation from the API docs. it will still be supported and there is no plan to remove the support. The preferred way is <ng-container></ng-container>. <ng-container> is a "logical" container. Childs nodes are rendered but the tag itself is not rendered. It is not a directive but a special angular construct. So this angular template :  

<div>
    <ng-container *ngIf="true">
        <h2>Hello</h2>
        <h3>World</h3>
    </ng-container>
</div>

will produce this kind of output : 

<div>
    <!--template bindings={
    "ng-reflect-ng-if": "true"
     }-->
    <!--template bindings={}-->
    <h2>Hello</h2>
    <h3>World</h3>
<div>

 

The <ng-container> tag is used to group nodes together and support structural directives. Simple no ?

 

 

Partagez

William Koza

William Koza

Consultant Indépendant chez  
Passionné par la conception et le développement logiciel, j’ai rapidement pris le rôle de Technical Leader lors de mes premiers projets. Ces expériences ont ainsi pu me faire accéder à des rôles d’architecte dans des projets d’envergure. Aujourd'hui, j'exerce mon métier en tant qu'indépendant, et toujours avec la même passion.
William Koza

Les derniers articles par William Koza (tout voir)