Angular NgTemplateOutlet

By Arvind Rai, March 22, 2020

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. Technologies Used
2. Using NgTemplateOutlet
3. NgTemplateOutlet with NgIf
4. NgTemplateOutlet with NgFor
5. NgTemplateOutlet with NgSwitch
6. Complete Example
7. Run Application
8. References
9. Download Source Code

1. Technologies Used

Find the technologies being used in our example.
1. Angular 9.0.2
2. Node.js 12.5.0
3. NPM 6.9.0

2. 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>

3. NgTemplateOutlet with NgIf

Find the use of ngTemplateOutlet with NgIf.

<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>

4. 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>

5. 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>

6. Complete Example

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  myNum = 51;
  bookContext = { bookName: 'Ramcharitmanas', writer: 'Tulsi Das', $implicit: 'Varanasi' };

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

app.component.html

<h3>Using NgTemplateOutlet</h3>
<!-- 1 -->
<ng-template #welcome>
    <p>Welcome to everyone!</p>
</ng-template>
<ng-container *ngTemplateOutlet="welcome"></ng-container>

<!-- 2 -->
<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>
<ng-container *ngTemplateOutlet="book; context: bookContext"></ng-container>

<h3>NgTemplateOutlet with ngIf</h3>

<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>

<h3>NgTemplateOutlet with ngFor</h3>

<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>

<h3>NgTemplateOutlet with ngSwitch</h3>

<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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

7. Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.