An in-depth look at Angular’s ng template

An in-depth look at Angular’s ng template

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

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.

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 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

An Angular Roadmap — The Past, Present, and Future of Angular

✅Interested in being an Angular developer in 2019? ... blog post it's most likely that you've written some code in javaScript in the past.