Difference between ng-container and ng-template in AngularJS

03 Jun, 2020
Both ng-container and ng-template can be used to create responsive and dynamic components. Angular provides a set of structural directives that can be used with both ng-template and ng-container such as:
ng-if
ng-for
ng-switch.
These structural directives are used to alter the structure of the DOM by conditionally rendering the HTML elements. 
Both ng-container and ng-template render the wrapped elements while hiding themselves but they both follow different mechanisms, these difference will be shown in the following article.
ng-template: Let’s try an example:
import { Component } from '@angular/core';@Component({  selector: 'app-root',  template: `  <div style="text-align: center;">      <!--no directive is used with ng-template-->      <ng-template>    <h1>      {{title}}    </h1>  </ng-template>  </div>   `,  styleUrls: []})export class AppComponent {  title = 'geeksforgeeks'; }
Yes, nothing will be rendered. When we check the HTML code, we will see:
It is because ng-template does not do anything on its own. It needs some rendering logic to render something.
Let’s try another example:
import { Component } from '@angular/core';  @Component({  selector: 'app-root',  template: `  <div style="text-align: center;">      <!--this time we will add an ng-if directive to ng-template.-->      <ng-template [ngIf]="datahide">  <p>    {{ title }}  </p>  </ng-template>  </div>   `,  styleUrls: []})export class AppComponent {  title = 'geeksforgeeks';   datahide = true;}
This time output will be like this:
In both the example, we can see template comments itself out, rendering the wrapped content conditionally.
ng-container: The ‘ng-container’ indeed shares some similarities with ‘ng-template’, like they both render the wrapped content while omitting themselves. But ng-container, on the other hand, is used when we use multiple structural directives and have no suitable parent wrapper. It does not require a structural directive to render the child elements unlike ng-template were using a structural directive was necessary.
Let’s see an example:
import { Component } from '@angular/core';  @Component({  selector: 'app-root',  template: `  <div style="text-align: center;">      <!--ng-container without any structural directive-->      <ng-container>  <p>    {{ title }}  </p>  </ng-container>  </div>   `,  styleUrls: []})export class AppComponent {  title = 'geeksforgeeks';   datahide = true;}
Now in this case, HTML was rendered even without any structural directive:
Let’s see what will happen if we wrap a ng-template inside a ng-container:
import { Component } from '@angular/core';  @Component({  selector: 'app-root',  template: `  <div style="text-align: center;">      <!--ng-container used as wrapper for ng-template-->      <ng-container>  <ng-template [ngIf]="datahide">  <p>    {{ title }}  </p>  </ng-template>  </ng-container>  </div>   `,  styleUrls: []})export class AppComponent {  title = 'geeksforgeeks';   datahide = true;}
ng-container successfully wraps a ng-template:
To conclude, we can say that both the ng-container and ng-template are used to wrap HTML elements. They differ in their mechanisms. Also, multiple structural directives are not possible inside ng-template but ng-container can be used to wrap multiple elements containing different structural directives so it is a perfect container.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.