The ngTemplateOutlet directive is used to repeat a block of content at a specified location. This can be useful when you need to generate the same content in different places and want to avoid duplication. For repeat, a block of the content we use the ngTemplateOutlet directive. The following example shows the directive in use.
ngtemplateoutlet example
Using the ngTemplateOutlet Directive in the template.html File in the src/app Folder
<ng-template #titleTemplate>
<h4 class="p-2 bg-success text-white">Repeated Content</h4>
</ng-template>
<ng-template [ngTemplateOutlet]="titleTemplate"></ng-template>
<div class="bg-info p-2 m-2 text-white">
There are {{getProductCount()}} products.
</div>
<ng-template [ngTemplateOutlet]="titleTemplate"></ng-template>The first step is to define the template that contains the content that you want to repeat using the directive. This is done using the ng-template element and assigning it a name using a reference variable, like this:
...
<ng-template #titleTemplate let-title="title">
<h4 class="p-2 bg-success text-white">Repeated Content</h4>
</ng-template>
...When Angular encounters a reference variable, it sets its value to the element to which it has been defined, which is the ng-template element in this case. The second step is to insert the content into the HTML document, using the ngTemplateOutlet directive, like this:
...
<ng-template [ngTemplateOutlet]="titleTemplate"></ng-template>
...The expression is the name of the reference variable that was assigned to the content that should be inserted. The directive replaces the host element with the contents of the specified ng-template element. Neither the ng-template element that contains the repeated content nor the one that is the host element for the binding is included in the HTML document. The following image shows how the directive has used repeated content.
ngtemplateoutlet context
The ngTemplateOutlet directive can be used to provide the repeated content with a context object that can be used in data bindings defined within the ng-template element, as shown in the following example.
Providing Context Data in the template.html File in the src/app Folder
<ng-template #titleTemplate let-text="title">
<h4 class="p-2 bg-success text-white">{{text}}</h4>
</ng-template>
<ng-template [ngTemplateOutlet]="titleTemplate"
[ngTemplateOutletContext]="{title: 'Header'}">
</ng-template>
<div class="bg-info p-2 m-2 text-white">
There are {{getProductCount()}} products.
</div>
<ng-template [ngTemplateOutlet]="titleTemplate"
[ngTemplateOutletContext]="{title: 'Footer'}">
</ng-template>To receive the context data, the ng-template element that contains the repeated content defines an attribute that specifies the name of a variable, similar to the expanded syntax used for the ngFor directive. The value of the expression assigns the let- variable a value, like this:
...
<ng-template #titleTemplate let-text="title">
...The let- attribute in this example creates a variable called text, which is assigned a value by evaluating the expression title. To provide the data against which the expression is evaluated, the ng-template element to which the ngTemplateOutletContext directive has been applied provides a map object, like this:
...
<ng-template [ngTemplateOutlet]="titleTemplate"
[ngTemplateOutletContext]="{title: 'Footer'}">
</ng-template>
...The target of this new binding is ngTemplateOutletContext, which looks like another directive but is actually an example of an input property, which some directives use to receive data values. The expression for the binding is a map object whose property name corresponds to the let- attribute on the other ng-template element. The result is that the repeated content can be tailored using bindings, as shown in the following image.
NGTemplateoutlet vs NGComponentoutlet
The ngTemplateOutlet directive is used to repeat a block of content at a specified location. The ngTemplateOutlet directive can be used to provide the repeated content with a context object that can be used in data bindings defined within the ng-template element.
Reference
https://angular.io/api/common/NgTemplateOutlet
Visit the angular tutorial list. And make strong your angular concept. click here. wuschools.com is always written about agular concept for the angular lover. Ang writes about how angular makes your life easy if you are a web site developer.
