Directiva ng-template

ng-template

Representa a una plantilla en angular y forma parte de @angular/core

La directiva siguiente no renderiza nada, solo estamos definiendo la témplate, pero todavía no la estamos usando:

<ng-template>

    <div> Nada que mostrar</div>

</ng-template>

 

Para renderizarla usamos la directiva *ngIf:

<div *ngIf="true else muestratemplate"> hola </div>

<ng-template #muestratemplate>

    <div> Bienvenido Template</div>

</ng-template>

ng-container

Con esta directiva no es necesario crear un div extra. Renderiza lo que contiene o bien la template templateMuestra.

<ng-container *ngIf="false else templateMuestra">

    <div>

        <p>hola</p>

    </div>

</ng-container>

 

<ng-template #templateMuestra>

    <div>template con ng-container</div>

</ng-template>

 

ngTemplateOutlet

Nos muestra un témplate ya previamente definido en cualquier sitio de la página

<ng-container *ngTemplateOutlet="templateMuestra">