Angular 16 ng-template with ngTemplateOutlet Example

Last Updated on March 4, 2024 by Digamber in Angular

While developing an Angular application, you may require to create reusable and dynamic template partials.

If you are wondering how you can resolve dynamic template partials rendering in Angular, So this tutorial will help you clear this concept.

We can create reusable components in Angular with the help of <ng-template> directive. The good thing is you can quickly render various template partials with it.

With this Angular directive, you can pass the dynamic properties as well. All you have to do just incorporate let attribute and leave rest on the things on its powerful mechanism to deal with dynamic template rendering.

So, without further ado, let us check out how to render angular template partials using NgTemplateOutlet directive.

Angular ng-template Example

ng-template is a directive which shows content when it is required to be displayed. Ideally, It is bound with the condition for showing the data.

Although, you can not view ng-template directive in DOM because it is not a web element.

ng-template is an angular directive and preferably used with angular structural directives, e.g. ngFor, ngIf and ngSwitch.

ng-template is an archetype of Angular, and it is wrapped within a comment area within HTML DOM.

Create Reusable Components with ng-template

Here is how you can build template partial in angular using ng-template directive.

<ng-template #mavericks>  
  This is an angular template partial
</ng-template>

It is easy to render the partial in your application, and you can call the partial with ngTemplateOutlet directive.

<ng-template #mavericks>  
  This is an angular template partial
</ng-template>

<div *ngTemplateOutlet="mavericks">
</div> 

Passing Property in ng-template Directive

This is the easy way to pass the property in angular template partial, just define let-* attribute with ng-template with your values.

<ng-template let-message="message" #mavericks >  

</ng-template>

<div *ngTemplateOutlet="mavericks; context:{message: 'This is an angular template partial'}">
</div> 

Usage of ng-template with *ngIf

Here is the example of *ngIf directive with ng-template.

<div *ngIf="display">

</div>

<ng-template [ngIf]="display">
  <div>Your code goes here</div>
</ng-template>

Usage of ng-template with *ngFor example

Here is the simple yet sleek example of *ngFor directive with ng-template.

<div 
     *ngFor="let movie of Movies; 
             let i=index; 
             let even=even; 
             trackBy: trackById">
   ({{i}}) {{movie.name}}
</div>

<ng-template 
   ngFor let-task [ngForOf]="movie" 
   let-i="index" 
   let-even="even"
   [ngForTrackBy]="trackById">

   <div>({{i}}) {{movie.name}}</div>

</ng-template>

Use ViewChild with Angular Template Partial

It is easy to get to your angular template from the component class additionally you try to access any DOM element employing ViewChild:

import { Component, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'ng-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent implements AfterViewInit {
  @ViewChild('mavericks') ngPartial: any;

  ngAfterViewInit() {
    console.log(this.ngPartial);
  }
}

Summary

We have completed this tutorial i hope i have been able to make you understand how to work with ng-template in Angular 16.

You must have understood by now how useful it could be if used properly.