What is TemplateRef in Angular?

What is TemplateRef in Angular?

What is a directive in Angular

It is very easy to directly manipulate DOM elements in Angular, just use the ElementRef class. But be careful! Angular labels it as a bad practice. Direct manipulation of the DOM creates an unwanted coupling between the rendering layer and the logic layer, which prevents you from launching your app in a web worker, for example.

To get around this obstacle you have Angular’s Renderer2 class. Renderer2 provides an API to safely access native elements, even when they are not supported by the platform (web workers, server-side rendering, etc).

None of these elements will be available in a non-browser environment, and therefore you will not be able to reuse your code for server-side rendering (with Angular Universal), put it into a native app, or get the most out of your interface by running everything in a Web Worker.

Let’s suppose an Angular component that has a button. To be able to manipulate this element, I need a reference to it and for that I use ElementRef, together with a template reference variable (myButton) the @ViewChild decorator.

Angular Ng-template

In this case, if we connect the dots, we can intuit that with our other familiar ngFor structural directive a process similar to this occurs. If you have ever tried to put two structural directives in the same element you will already know that it gives an error. Let’s see how we can fix this:

Yes, and for that, we have the ng-container structural directive. But wait, before we go any further with this, you may have noticed that the array of people is defined as People[]. In typescript we have what are called interfaces, which help us and make our life easier when writing code. They are like a contract in which we specify the elements that it must contain, either to the class that is implemented or, in our case, as a new type.

Read more  When and where the Convention on the Rights of the Child held?

Now yes, with the ng-container directive there is no need to create an extra div. It renders either what it contains or the template nopeople. But rendering template references or pointing to other templates as with ngIf is just the beginning.

With ngTemplateOutlet we can have our template anywhere on the page and instantiate it.  We are referencing the template nopeople with its reference ‘#nopeople’ and we use the structural directive ngTemplateOutlet to instantiate the template.

Angular template

But what are they? The ng-template are angular elements inspired by the webcomponent templates. The idea is that the compiler does not render this template when it is parsed, but it is rendered where we indicate it. In this way, we have a fully reusable html section that we can inject into any site.

The first thing is to understand who has the control of the content, we are going to do something very simple, we are going to pass a component to another component as much by templating as by content projection and we are going to control when the ngOnInit of this component happens.

Concretely the component is being created passed by content projection, and it is that the one in charge of creating the component and sending it down, is the ParentComponent. With which the behavior that we have is not the expected one, it is more serious.

If we start clicking on the first button (the one associated to the templating) we can see that the message “Template created” is accumulating, however, even if we click on the second button there is only one message. This means that the component passed by content projection has only been instantiated once, so it doesn’t matter if we wrap it with an ngIf in the child, since it has no control over the component.

Read more  What is meant by synecdoche?

Ngtemplateoutlet

In this case, if we connect the dots, we can intuit that with our other familiar ngFor structural directive a process similar to this occurs. If you have ever tried to put two structural directives in the same element you will know that it gives an error. Let’s see how we can fix this:

Yes, and for that, we have the ng-container structural directive. But wait, before we go any further with this, you may have noticed that the array of people is defined as People[]. In typescript we have what are called interfaces, which help us and make our life easier when writing code. They are like a contract in which we specify the elements that it must contain, either to the class that is implemented or, in our case, as a new type.

Now yes, with the ng-container directive there is no need to create an extra div. It renders either what it contains or the template nopeople. But rendering template references or pointing to other templates as with ngIf is just the beginning.

With ngTemplateOutlet we can have our template anywhere on the page and instantiate it.  We are referencing the template nopeople with its reference ‘#nopeople’ and we use the structural directive ngTemplateOutlet to instantiate the template.

Read more  How can I watch the jw convention online?