🌟 <ng-template> in Angular

In this article, we take deep dive into the working of Angular’s <ng-template>

Have you ever wondered, where are those text or markup which you placed inside <ng-template> went?! Come, let's travel together to find the exact reason behind it.

Angular’s <ng-template> behaves in the same way as native HTML <template> behaves.

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

This is a snippet, which is placed inside an HTML file. If you run that file, snippets those are placed inside <template>won’t be visible on the screen, unless they are treated with Javascript.

// checking for thr the browser support for templates
if ('content' in document.createElement('template')) {

    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    var t = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tb.appendChild(clone);

    // Clone the new row and insert it into the table
    var clone2 = document.importNode(t.content, true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tb.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

Source: MDN

var t = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);'
    tb.appendChild(clone);

These three lines are responsible for the display of data those are inside the <template> .

But, In Angular(ng) with the help of its core classes, we can perform tasks more efficiently.

Using <ng-template> we can create the template which can be used later.

<ng-template #greet>
<p>Thanks for your interest.</p>
</ng-template>

In its component.ts file, read the template via @ViewChild .

@ViewChild(‘greet’) greetTemplate: TemplateRef<any>;

Get Ganapathi Pranesh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Create a placeholder or reference, where our template must be inserted, and read it using @ViewChild as ViewContainerRef as shown below.

Component’s template (HTML) :

<ng-container #placeholder></ng-container>

<ng-container> wont create extra element on DOM, hence it is the best choice to use for templating.

Component’s Controller (TS) :

@ViewChild(‘placeholder’, {read: ViewContainerRef}) placeholderRef: ViewContainerRef;

Here for the demonstration purpose, we should display the greeting message once the user clicks on greet button.

addTemplate() {
this.placeholderRef.clear();
this.placeholderRef.createEmbeddedView(this.greetTemplate);
}

On invoking this method, the template will be displayed. Moreover, we can use its own variables inside ng-template.

<ng-template #details let-name let-place=”place”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-3">
<div class=”border p-3">
<p>
<strong>{{name}}</strong>&nbsp;<small>{{place}}</small>
</p>
</div>
</div>
</div>
</div> </ng-template>

this.placeholderRef.createEmbeddedView(this.detailsTemplate, {
$implicit: ‘Pranesh’,
place: ‘Erode’
});

let-name let-place are the parameters, as a second argument we can pass the template parameters.let-place is initialised to place property from the context object passed, $implicit property value will be assigned to the parameter which is not initialised, here let-name. That’s how values are passed to templates in angular.

Finally, to make all these work easy and to implement templating in Angular in an easy way, we have ngTemplateOutlet.Through ngTemplateOutletContext we can pass the context variable 🎉.

<ng-container [ngTemplateOutlet]=”details” [ngTemplateOutletContext]=”{$implicit: ‘Pranesh’,place: ‘Erode’}”></ng-container>

Conclusion:

Where to use ng-template ? if you’re having an element or message, that need to be repeated along many places dynamically, then go for ng-template.