Difference between ng-container and ng-template in AngularJS

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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'
}

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right


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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.