An in-depth look at Angular’s ng template

Neeraj Dana

5 min readMar 23, 2021

Angular’s ng Template in Depth

Let’s look at Angular’s ng template in-depth and see some use cases.

In this article, we will try to understand what ng-template is and how it works.

ng-template

ng-template is a code snippet in which the HTML or angular elements are isolated together.

As in the above image, we can see we have an ng-template with a reference message template and two items in it. As a whole, it seems to be a single element.

ng template cannot be instantiated manually and hence if we write this code in
our HTML it won’t appear in the browser, as the template can only be instantiated
programmable

To render the content of template, we can use the
ngtemplateoutlet directive as seen in the image:

ngTemplate can use properties of its parent context. It can also have its private context as we can pass values in the template and use them inside it. This makes it a disconnected and standalone piece that can be
reused many times.

To pass values in ngtemplate, the syntax is a bit different than the regular way we
give properties. In ng template, we use the **let- **keyword as seen in the image. The
properties in the context object can be more than one and they will be passed as
different properties in the template.

Popular Implementation of ngtemplate

The Angular Framework uses ng template in many places. Some of them are ngif and
ngfor. Let’s see one of them in more detail.

ngIf in detail

ng if is a structural directive and one of the most commonly used directives in angular.
Let’s take a look at the syntax of it:

<div *ngIf="true">
   I will be shown if the condition is true
</div>

Behind the scenes, the framework does a fantastic transformation of our simple
and straightforward syntax into a complex syntax. Let me show you what it looks
like after conversion:

<ng-template [ngIf]="true">
  <div>
    I will be shown if the condition is true
   <div>
</ng-template>

As you can see in the code snippet, our structural directives are also nothing more
than attribute directives. Behind the scenes they are also converted in to
attribute directives and are applied to an ng template. They then instantiate that
template for us.

ngtemplate as a standalone component and using it in another component

We can start by defining the custom template in the parent component: the
empty context (we cannot modify it ) with name sample

A static template with no context

And then on the child component, we can define an input property which is also
a template named sample

As you can see in the code, we are just displaying the template based on a condition
in if else. Internally it will be doing something like this:

Ok so far it will work, and we will see the result as expected. If the value
property of the child component is set to false, then we will see this:

So far so good. Now we can pass a simple static ng-template as a parameter in
another component and can display it conditionally.

But there is a problem in this approach:

It is not too useful
It is static — you can not manipulate it as per your requirements. For example,
the message in the template should be provided by the child component, right? It
makes it a more dynamic and reusable template.

So let’s say we modify our template and make room for the context in it:

Now we can pass the input in our template. In case you don’t know how
ng-template works and how to give a parameter to it, read this
here

Now in the child component, we have to do some modification for the template to accept input:

So far our ng-template is quite dynamic, and you can extend it further to do great experiments.

Wrapping Up

The core directives ng-template and ngTemplateOutlet all combine to allow us to create highly dynamic and customizable components.

We can even change completely the look and feel of a component based on input
templates, and we can define a template and instantiate in multiple parts of
the application.

And this is just one possible way that these features can be combined!

I hope that this post helped you get familiar with some of the more advanced
features of Angular core.

If you liked this article, follow me to get more of this kind of stuff. Also,
comments are always welcomed :)