ng2 - Difference between ng-container and ng-template tags

Question

Both of them are at the moment (2.x, 4.x) used to group elements together without having to introduce another element which will be rendered on the page (such as div or span).

template, however, requires nasty syntax. For example,

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

would become

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

You can use ng-container instead since it follow the nice * syntax which you expect and are probably already familiar with.

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

You can find more details by reading this discussion on GitHub.

---

Note that in 4.x <template> is deprecated and is changed to <ng-template>.

---

Use

• <ng-container> if you need a helper element for nested structural directives like *ngIf or *ngFor or if you want to wrap more than one element inside such a structural directive;
• <ng-template> if you need a view "snippet" that you want to stamp at various places using ngForTemplate, ngTemplateOutlet, or createEmbeddedView().

ng-template is used for the structural directive like ng-if, ng-for and ng-switch. If you use it without the structural directive, nothing happens and it will render.

ng-container is used when you don't have a suitable wrapper or parent container. In most cases, we are using div or span as a container but in such cases when we want to use multiple structural directives. But we can't use more than one structural directive on an element, in that case, ng-container can be used as a container

ng-template
The <ng-template> is an Angular element for rendering HTML. It is never displayed directly. Use for structural directives such as: ngIf, ngFor, ngSwitch,..
Example:

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular translates the *ngIf attribute into a <ng-template> element, wrapped around the host element, like this.

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
Use as a grouping element when there is no suitable host element.
Example:

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

This will not work. Because some HTML elements require all immediate children to be of a specific type. For example, the <select> element requires children. You can't wrap the options in a conditional or a <span>.

Try this :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

This will work.

More information: Angular Structural Directive

ng-template show true value.

<ng-template>
    This is template block
</ng-template>

Output:

ng-container show without condition also show content.

<ng-container>
    This is container.
</ng-container>

Output:
This is container.