Menu

Angular: Entendiendo ng-template

angularservicio - August 20, 2018 por Carlos Rojas | Edita este Post.
Angular CLI6.1.1

Cuando estas construyendo interfaces complejas como por ejemplo multiples forms y tablas con los que tus usuarios van a interactuar algo como ngIf deja de ser suficiente por claridad y escalabilidad es aquí donde ng-template resulta útil.

¿ Que es template ?

Dentro del mundo del desarrollo Web siempre se encuentra la necesidad de compartir piezas de html en varias vistas de una WebApp recientemente, con la llegada de los Web Components podemos encontrar la implementación de template para poder reutilizar estas estructuras en diferentes lugares. Su implementación en Vanilla Javascript y HTML.


<template id="mytemplate">
  <div>Hola soy un template</div>
</template>

y para usarla seria algo como

var t = document.querySelector('#mytemplate');
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

¿ Que es ng-template ?

Es una directiva que hace parte del @angular/core y como su nombre lo indica representa a una plantilla en Angular. Aunque no lo creas si has usado algo como ngIf, ngFor, o ngSwitch ya has usado ng-template esto es debido a que Angular por debajo la utiliza para hacer su magia. Prueba algo sencillo.


<ng-template>
  <div>Hola soy un ng-template</div>
</ng-template>

Notaras que no se renderiza nuestro template y esto es debido a que es una definición de ng-template pero no se esta usando algo asi como el primer ejemplo.

entonces, podemos decir que ng-template es la propia implementación de template de Angular.

¿ Como usamos ng-template ?

Un ejemplo sencillo donde es util el uso de ng-template es en algo tan comun como un loader.


<div [ngIf]="status" [ngIfElse]="loading">
   <div>
     Hola soy un ng-template
   </div>
</div>

<ng-template #loading>
    <div>Cargando...</div>
</ng-template>

Aca utilizamos ngIf para chequear si el estado de nuestra vista esta listo o mostramos un mensaje de Cargando…

w

La directiva ng-container

ng-container es una directiva que principalmente nos da un lugar donde inyectar ng-template sin tener que agregar elementos extras en el DOM y sin crear elementos que posiblemente puedan afectar nuestro CSS. Su uso es algo como esto:


<ng-container *ngTemplateOutlet="loading"></ng-container>

Puedes observar que aca estamos usando la directiva ngTemplateOutlet esta nos permite cargar las plantillas que hemos creados anteriormente en este contenedor.

El contexto dentro de los template.

Dentro de ng-template tenemos acceso a las mismas variables que podemos observar por fuera del ng-template en el que fueron creadas. como por ejemplo status pero cada ng-template podria utilizar y definir sus propias variables.


<ng-template #estimateTemplate let-lessonsCounter="estimate">
    <div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>

Entonces observemos este pequeño ejemplo. aca vemos algo que es let- esta es una manera de crear un Input() para esos templates y decirle que su nombre va a ser lessonCounter es por esto que dentro de nuestro template podemos hacer uso del lessonCounter y la manera en que se lo estamos enviando es a través del ngTemplateOutlet cuando despues del ; le enviamos el contexto que seria nuestra variable ctx.

Puedes entender un poco mas a fondo en la Documentación.

Bueno esto es todo por el dia de hoy, espero haya sido de utilidad :)

¡Compártelo!

Artículos relacionados: