Angular Templates

In this post we will review how to use Angular Templates.

Angular Templates

We can define a template block and show it using ngIf and the else statement, taking for example a variable named imageUrl, we can do the following:

<img alt="Example image" *ngIf="imageUrl; else noImage" [src]="imageUrl">

<ng-template #noImage>
  <p>No image is available.</p>
</ng-template>

Angular template instantiation with ngTemplateOutlet

You can define a template and then instatiate it with the ngTemplateOutlet, you can also pass variables to local variables inside the template:

<ng-template #noImage let-itemName="name">
  <p>No image is available for {{ itemName }} item.</p>
</ng-template>

<div *ngTemplateOutlet="noImage; context: {name: myItem.name}">

</div>

let-itemName specifies the name of the local variable used inside the ng-template, you can see that is used as itemName, that means that what is after let- is the name of the local variable. The "name" that is assigned to let-itemName is the name inside context ins *ngTemplateOutlet. And finally, myItem.name is the variable at the level of the component.

Of course you can instantiate as many *ngTemplateOutlet as you want.

You can also use ng-container instead of a div, to not generate unnecessary HTML elements:

<ng-container *ngTemplateOutlet="noImage; context: {name: myItem.name}">

</ng-container>

Templates as Component Inputs

You can pass templates to a component input in the following way:

app.component.html

<ng-template #noImage let-itemName="name">
  <p>No image is available for {{ itemName }} item.</p>
</ng-template>

<custom-component [noImageTemplate]="noImage"></custom-component>

custom-component.component.ts

@Input()
noImageTemplate: TemplateRef<any>;

Now we can use this inside our Custom Component View:

custom-component.component.html

<img [src]="imageUrl" *ngIf="imageUrl; else noImage">

<ng-template #noImage>
    <ng-container *ngTemplateOutlet="noImageTemplate; context: {name: itemName}"></ng-container>
</ng-template>