Angular NgTemplateOutlet Example

By Arvind Rai, February 12, 2024

On this page we will discuss Angular NgTemplateOutlet example. The NgTemplateOutlet inserts TemplateRef view to the required location. The NgTemplateOutlet can be used with <ng-container>. The NgTemplateOutlet can also attach a context object to TemplateRef view. The keys of context object is used for binding by the local template let declarations in TemplateRef.
Now let us discuss NgTemplateOutlet examples step-by-step.

1. Using NgTemplateOutlet

EX-1: Suppose we have a template with reference variable welcome.

<ng-template #welcome>
    <p>Welcome to everyone!</p>
</ng-template>

We will assign reference variable to ngTemplateOutlet.

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

Find the code in DOM.

<p>Welcome to everyone!</p>

EX-2: Here we will discuss the example to use context object with NgTemplateOutlet. Suppose we have following object in our component.

bookContext = { bookName: 'Ramcharitmanas', writer: 'Tulsi Das', $implicit: 'Varanasi' };

The properties bookName and writer can be assigned to TemplateRef using let.

<ng-template #book let-book="bookName" let-writer="writer" let-location>
    <span> I am from {{location}} and like to read {{book}} written by {{writer}} ji. </span>
</ng-template>

The $implicit is used to set value as default. In the above code, location has not been assigned to any context property, so the value of location will be default defined by $implicit in context object bookContext.
Find the code to use context object with ngTemplateOutlet.

<ng-container *ngTemplateOutlet="book; context: bookContext"></ng-container>

The context object is assigned using context key. In the above code, the book is the template reference variable and bookContext is our context object.
Find the code in DOM.

<span> I am from Varanasi and like to read Ramcharitmanas written by Tulsi Das ji. </span>

2. NgTemplateOutlet with NgIf

Find the TS code.

myNum = 51;

Find the use of ngTemplateOutlet with NgIf in HTML template.

<ng-template #numTemplate let-num="num" let-numType="numType">
    <span>{{myNum}} is {{numType}}.</span>
</ng-template>

<ng-container *ngIf="myNum % 2 === 0">
    <ng-container *ngTemplateOutlet="numTemplate; context: {num: myNum, numType: 'even'}"></ng-container>
</ng-container>
<ng-container *ngIf="myNum % 2 === 1">
    <ng-container *ngTemplateOutlet="numTemplate; context: {num: myNum, numType: 'odd'}"></ng-container>
</ng-container>

3. NgTemplateOutlet with NgFor

Here we will discuss using ngTemplateOutlet with NgFor.
Find the context object.

allUsers = [
  { userId: 101, name: 'Mahesh'},
  { userId: 102, name: 'Krishna'},
];

Find the HTML code.

<ng-template #userTemplate let-userId="userId" let-name="name">
    <div>Id: {{userId}}, Name: {{name}} </div>
</ng-template>

<ng-container *ngFor="let user of allUsers">
    <ng-container *ngTemplateOutlet="userTemplate; context: user"></ng-container>
</ng-container>

4. NgTemplateOutlet with NgSwitch

Find the use of ngTemplateOutlet with NgSwitch.

<ng-container [ngSwitch]="myNum % 2">
    <ng-container *ngSwitchCase="0">
        <ng-container *ngTemplateOutlet="numTemplate; context: {num: myNum, numType: 'even'}"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="1">
        <ng-container *ngTemplateOutlet="numTemplate; context: {num: myNum, numType: 'odd'}"></ng-container>
    </ng-container>
</ng-container>