Angular NgTemplateOutlet
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.
Contents
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>
ngTemplateOutlet
.
<ng-container *ngTemplateOutlet="welcome"></ng-container>
<p>Welcome to everyone!</p>
NgTemplateOutlet
. Suppose we have following object in our component.
bookContext = { bookName: 'Ramcharitmanas', writer: 'Tulsi Das', $implicit: 'Varanasi' };
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>
$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>
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 ofngTemplateOutlet
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 usingngTemplateOutlet
with NgFor
.
Find the context object.
allUsers = [ { userId: 101, name: 'Mahesh'}, { userId: 102, name: 'Krishna'}, ];
<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 ofngTemplateOutlet
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.tsimport { 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'}, ]; }
<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>
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.

8. References
NgTemplateOutletAngular <ng-container>