Introduction to ng-template in Angular

Varun, author for staff augmentation blog
Varun Omprakash
Content writer at Flexiple. Passionate about sales. Loves reading.

In this blog post, we explain what is the ng-template in Angular, what it is used for, and how to use it along with structural directives like ngIf, ngFor, and ngSwitch.


Table of Contents

  • What is ng-template in Angular?
  • What is ng-template used for?
  • How to use the ng-template?

What is ng-template in Angular?

ng-template is an Angular element that is used for rendering HTML in a template. However, it is not rendered directly on DOM. If you include an ng-template tag to a template, the tag and the content inside it will be replaced by comment upon render.

For instance, if you create a new Angular application and input the below code:

<div>How to define a template using ng-Template</div>

<ng-template>
    <p>Ng Template contents</p>
</ng-template>

// Output

How to define a template using ng-Template

You'll find that the output doesn't render 'Ng Template contents', but only the text inside the <div> element.

This is because ng-template only defines a template, but doesn't let Angular know the conditions for displaying it.

If you take a look at the HTML source code, here's how it will look:

<app-ngtemplate _ngcontent-c0 _nghost-c1>
    <div _ngcontent-c1>How to define a template using ng-Template</div>
    <!---->
<app-ngtemplate>

Angular wraps the element inside ng-template, and replaces the ng-template in DOM with diagnostic comments.

So, you have to give Angular the conditions of its display - like where, and when to display it. Before we get to that, let's first understand what exactly ng-template is.


What is ng-template used for?

Now, this might seem pointless to you - why use a tag when its contents don't render? However, note that ng-template is always used along with structural derivatives such as ngIf, nfFor, and ngSwitch. It is used for grouping content that is not rendered, but that can be used in other parts of your code.

Alternatively, (and preferably), you can also use the ng-template element by prefixing an asterisk (*), which is the shorthand syntax. For instance, *ngIf, *ngFor.

These directives are very common in Angular, and are present almost everywhere either implicitly or explicitly. However, note that it is not possible to use the same element along with two structural directives.

You can use a combination of these directives together to build dynamic and customisable components, and completely change the design of a component based on input templates.



How to use the ng-template?

As mentioned previously, you can use the ng-template alongside standard and custom structural derivatives. Let us see how, with examples:


Using ng-template with *ngIf

<div *ngIf="ngIf-example" class="display-hello">Hello World!</div>

<!--after conversion-->
<ng-template [ngIf]="ngIf-example">
    <div class="desplay-hello">Hello world!</div>
</ng-template>

Using ng-template with *ngFor

<div
     *ngFor="let order of orders; 
             let x=list; 
             let main=main; 
             trackBy: trackById">
   ({{x}}) {{order.id}}
</div>

<ng-template 
   ngFor let-order [ngForOf]="orders" 
   let-x="list" 
   let-main="main"
   [ngForTrackBy]="trackById">
<div>({{x}}) {{order.id}}</div>
</ng-template>

Using ng-template with ngSwitch

<div [ngSwitch]="ngSwitch Demo"> 
  <p *ngSwitchCase="Example1">Example One</p>
  <p *ngSwitchCase="Example2">Example Two</p>
  <p *ngSwitchCase="Example3">Example Three</p> 
  <p *ngSwitchDefault>NoExample</p>
</div>

<div [ngSwitch]="ngSwitch Demo">
  <ng-template *ngSwitchCase="Exammple1">
    <p>Example One</p>
  </ng-template>
  <ng-template [ngSwitchCase]="Example2">
    <p>Example Two</p>
  </ng-template>
  <ng-template [ngSwitchCase]="Example3">
    <p>Example Three</p>
  </ng-template>
  <ng-template [ngSwitchDefault]>
    <p>NoExample</p>
  </ng-template>
</div>