An in-depth look at Angular’s ng template - 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 …

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 ngtemplate, 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 ngtemplate and use them inside it. This makes it a disconnected and standalone piece which 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:

1. It is not too useful
2. It is static - you can not manipulate it as per your requirements. For example,
3. the message in the template should be provided by the child component, right? It
4. 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.

#angular