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 …
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 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.
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.
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.
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:
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
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.
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