Contenido

¿Qué es ng-template en Angular?

¿Para qué se usa ng-template?

¿Cómo se usa ng-template?

¿Qué es?

¿Qué es?

Es un elemento de angular que se utiliza para representar HTML en una plantilla.

Sin embargo, no se renderiza directamente en el DOM.

Sino que la etiqueta y el contenido dentro de ella serán reemplazados por comentarios al renderizar.

Por ejemplo, si introduces el siguiente código:

						
How to define a template using ng-Template

	
Ng Template contents

Por ejemplo, si introduces el siguiente código:

						
How to define a template using ng-Template

	
Ng Template contents

						// Output

						How to define a template using ng-Template
	  

Esto se debe a que ng-template sólo define una plantilla, pero no permite que Angular conozca las condiciones para mostrarla.

¿Para qué?

¿Para qué?

• Para agrupar contenido que no se renderiza.
• Para utilizar directivas estructurales como *ngIf, *ngFor, *ngSwitch.

¿Cómo se usa?

¿Cómo se usa?

Vamos a probar un ejemplo de su uso

Uso de ng-template con *ngIf

Donde ‘’hello’’ es una variable booleana true:

						hello world!!

¿Qué es lo que ocurre si utilizo un div en lugar de ng-template?

¿Qué es lo que ocurre si utilizo un div en lugar de ng-template?

						
 div hello world!!

**¿Cuándo utilizar ng-template?

**¿Cuándo utilizar ng-template?

Vamos a ver un ejemplo:

						



	
div 1

							

	
div 2

							
Hello is {{ hello }}

						



	
div 1

							

	
div 2

							
Hello is {{ hello }}

Conclusión

ng-template es perfecto para poder llevar a cabo el renderizado de templates condicionales de una forma limpia y óptima.