Diferencia entre ng-container y ng-template en AngularJS

Tanto ng-container como ng-template se pueden usar para crear componentes receptivos y dinámicos. Angular proporciona un conjunto de directivas estructurales que se pueden usar tanto con ng-template como con ng-container, como:

• ng-si
• ng-para
• interruptor ng.

Estas directivas estructurales se utilizan para alterar la estructura del DOM mediante la representación condicional de los elementos HTML. 

Tanto ng-container como ng-template representan los elementos envueltos mientras se ocultan, pero ambos siguen mecanismos diferentes, estas diferencias se mostrarán en el siguiente artículo.

ng-template: Probemos un ejemplo:

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

Sí, no se renderizará nada. Cuando comprobemos el código HTML, veremos:

Es porque ng-template no hace nada por sí solo. Necesita algo de lógica de renderizado para renderizar algo.

Probemos con otro ejemplo:

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

Esta salida de tiempo será así:

En ambos ejemplos, podemos ver los comentarios de la plantilla, mostrando el contenido envuelto de forma condicional.

ng-container: El ‘ng-container’ de hecho comparte algunas similitudes con ‘ng-template’, ya que ambos representan el contenido envuelto mientras se omiten. Pero ng-container, por otro lado, se usa cuando usamos múltiples directivas estructurales y no tenemos un contenedor principal adecuado. No requiere una directiva estructural para representar los elementos secundarios, a diferencia de ng-template, donde era necesaria una directiva estructural.

Veamos un ejemplo:

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

Ahora, en este caso, HTML se representó incluso sin ninguna directiva estructural:

Veamos qué sucederá si envolvemos una plantilla ng dentro de un contenedor ng:

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 envuelve con éxito una plantilla ng:

Para concluir, podemos decir que tanto ng-container como ng-template se utilizan para envolver elementos HTML. Se diferencian en sus mecanismos. Además, múltiples directivas estructurales no son posibles dentro de ng-template, pero ng-container se puede usar para envolver múltiples elementos que contienen diferentes directivas estructurales, por lo que es un contenedor perfecto.