This page looks best with JavaScript enabled

ng-template, ng-container And ngTemplateOutlet In Angular

 ·  ☕ 5 min read  ·  ✍️ Adesh

Let’s explore each feature one by one.

1. ng-template

<ng-template> is used to render HTML element. The code inside the ng-template doesn’t display directly but we have to invoke this directive using any structural directive like [ngIf].

Let’s create our first ng-template like this showing below:

1
<ng-template>This is test template: zeptobook</ng-template>

So the complete code will be like:

app.component.html

1
2
3
4
5
6
7
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <ng-template>This is test template: zeptobook</ng-template>
</div>
<router-outlet></router-outlet>

Notice the line 5, we have created our first ng-template, and now run the app in the browser and see the output.

ng-template in angular 7

Hey, but where is my template? I don’t see it here. The reason being is that, we have just declared our template, but don’t use it as of now. If you check the view source of the page, you will notice, our template is showing in comment section <!---->.

ng-template in angular

Let’s try to understand few things about <ng-template>.

What is in Angular?

  • <ng-template> is a virtual element and its contents are displayed only when used along with structural directives like [ngIf], [ngFor] and [ngSwitch]. That’s why our template doesn’t show up in above example.

  • <ng-template> is not exactly a true web element. When we compile our code, we will not see our a <ng-template> in our HTML DOM.

  • Without any structural directive, Angular will compile the <ng-template> element into comment section in HTML DOM.

Now, let’s see how to display our <ng-template> in our web page using [ngIf].

Using with [ngIf] directive

To display our template, simply we will use [ngIf] directive in our code. Take a look at below code.

app.component.html

1
2
3
<ng-template [ngIf]="showTemplate"
  >This is test template: zeptobook</ng-template
>

app.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "ZeptoBook";
  showTemplate: boolean = true; //Setting the flag true to show the <ng-template>
}

Now, it will display our ng-template content on our web page.

ngTemplate in Angular

Using with [ngFor] directive

Let’s move forward, and see how we can use our <ng-template> with [ngFor] directive as well.

app.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "ZeptoBook";
  showTemplate: boolean = true;

  Employees = [
    { EmpName: "Robert", Dept: "HR" },
    { EmpName: "Julie", Dept: "HR" },
    { EmpName: "Albert", Dept: "Finance" },
    { EmpName: "Michael", Dept: "Account" },
    { EmpName: "Jolly", Dept: "Account" },
    { EmpName: "German", Dept: "Finance" },
  ];
}

In the above code, we have created an Employees object, which we will show using <ng-template> with [ngFor] directive.

2. ng-container

Let’s see the case, where we can use ng-container directive. What if we try to use multiple structural directives like ngIf and `ngFor` in same element.

1
2
3
4
<h3>ng-template with directive ngIf & ngFor</h3>
<div *ngIf="Employees" *ngFor="let emp of Employees">
  <p>{{emp.EmpName}} : {{emp.Dept}}</p>
</div>

Here in the above code, we have used ngIf and `ngFor` on same element. Now, let’s see the result in the browser.

ng-container in angular

It is saying, you can’t have multiple template bindings on one element. Use only one attribute

So, in order to fix this issue, we have to do something like this.

1
2
3
4
5
<div *ngIf="Employees">
  <div *ngFor="let emp of Employees">
    <p>{{emp.EmpName}} : {{emp.Dept}}</p>
  </div>
</div>

Now, check the output in the browser, it will work fine now.

So, what did we do to fix this problem? We have created an additional div with the ngIf directive, and moved the div with `ngFor` inside it.

This solution will work, but we created another div element. There is a way to avoid creating extra element and get the result.

So, here is the solution: ng-container directive. Let’s see how to use it.

1
2
3
4
5
<ng-container *ngIf="Employees">
  <div *ngFor="let emp of Employees">
    <p>{{emp.EmpName}} : {{emp.Dept}}</p>
  </div>
</ng-container>

You can see, we have replaced <div> with <ng-container> directive.

As we can see, the ng-container directive provides us with an element that we can attach a structural directive to a section of the page, without having to create an extra element just for that.

3. ngTemplateOutlet

An embedded view from a prepared TemplateRef can be inserted via ngTemplateOutlet.

1
2
3
4
5
6
<ng-template #employeelist>
  <div *ngFor="let emp of Employees">
    <p>{{emp.EmpName}} : {{emp.Dept}}</p>
  </div>
</ng-template>
<ng-container *ngTemplateOutlet="employeelist"></ng-container>

The template being loaded is refered via template reference #employeelist and ngTemplateOutlet is used to instantiate the template.

Summary

So, in this blog, we learn about ng-template, ng-container and ngTemplateOutlet used in any angular app. These are very powerful features of angular, and make our code more clean and dynamic. This blog basically discussed about basics of these features. I will try to write another blog post with more use-cases of these template directives.

Further Reading

Spread Operator In TypeScript

Learn About Observables, Observers And Operators of RxJS – Angular

5 Best Free Cloud Storages

Share on

Adesh
WRITTEN BY
Adesh
Technical Architect