Blog

In this blog, we are going to explore the most important features of angular. We will explore about ng-template, ng-container & ngTemplateOutlet. With the help of these features, we can create highly dynamical and customizable angular components.

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:

So the complete code will be like:

app.component.html

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

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

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

What is <ng-template> 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 <ng-template> 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

app.component.ts

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

Using <ng-template> with [ngFor] directive

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

app.component.ts

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.

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

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.

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.

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.

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