<ng-template> is an Angular element used for defining template content that you can reuse or conditionally include in the application. The content inside <ng-template> is not directly rendered in the DOM.

Usage with structural directives

*ngIf directive

The structural directive *ngIf is used in combination with <ng-template> to conditionally display content based on the value of the isLogged variable. *ngIf conditionally adds or removes elements from the DOM.

*.component.html

<div *ngIf="isLogged; else elseBlock">
  <p>Welcome back!</p>
</div>
<ng-template #elseBlock>
  <p>Please log in.</p>
</ng-template>

*.component.ts

isLogged = true;

The *ngIf directive checks the value of the isLogged variable. If isLogged is true, the content Welcome back! will be rendered. If isLogged is false, the <ng-template> with the reference #elseBlock will be used to display alternative content.

Getting Started with Angular: Conditional Rendering with ngIf Directive

*ngFor directive

The following example uses Angular’s templating features to render a list of items with custom content. The <ng-template> element defines a reusable template for list items, which is then used by the *ngFor directive to dynamically generate list elements based on the items array. The template reference and variables ensure that each item and its index are correctly displayed within the list.

*.component.html

<!-- The template for list items -->
<ng-template #listItem let-item let-i="index">
  <li>
    {{ i + 1 }}. <i>{{ item }}</i>
  </li>
</ng-template>

<!-- Use the template within *ngFor -->
<ul>
  <ng-container *ngFor="let item of items; let i = index">
    <ng-template
      [ngTemplateOutlet]="listItem"
      [ngTemplateOutletContext]="{ $implicit: item, index: i }"
    ></ng-template>
  </ng-container>
</ul>

*.component.ts

items = ['Item One', 'Item Two', 'Item Three'];

<ng-container> is a special element that can hold structural directives without adding any additional elements to the DOM. <ng-container> acts as a placeholder or a logical grouping element, allowing to apply structural directives like *ngIf, *ngFor, or *ngSwitchCase without any extra elements to the DOM. ngTemplateOutlet specifies the template to be instantiated (listItem). ngTemplateOutletContext provides the context for the template, including the current item and its index.

$implicit: item assigns the current item to the default template variable. index: i assigns the current index to the index variable in the template. The *ngFor directive iterates over each item in the items array.

You can also use the following syntax:

*.component.ts

items = ['Item One', 'Item Two', 'Item Three'];

*.component.html

<!-- The template for list items -->
<ng-template #listItem let-item let-i="index">
  <li>
    {{ i + 1 }}. <i>{{ item }}</i>
  </li>
</ng-template>

<!-- Use the template within *ngFor -->
<ul>
  <ng-container
    *ngFor="let item of items; let i = index; template: listItem"
  ></ng-container>
</ul>

These examples demonstrate how to use <ng-template>, <ng-container>, and ngTemplateOutlet directive to create a reusable template for list items. The listItem template is defined once and then instantiated for each item in the items array using *ngFor and ngTemplateOutlet.

*ngTemplateOutlet directive

*ngTemplateOutlet is a structural directive shorthand for the ngTemplateOutlet directive.

*ngTemplateOutlet="template" Angular expands to:

<ng-template [ngTemplateOutlet]="template"></ng-template>

*ngTemplateOutlet structural directive is for simpler and more readable template insertion when no additional context is needed.

Example #1

*.component.ts

userName = 'Peter';

*.component.html

<ng-template #showName let-name>
  <p>Hello, {{ name }}!</p>
</ng-template>

<div *ngTemplateOutlet="showName; context: { $implicit: userName }"></div>

The context object allows you to pass values into the template. $implicit is a special key used to bind to the default variable (let-name in this case). When you use $implicit, you don’t need to specify the variable name explicitly in the template definition (let-name="name"). Defining let-name without ="name", Angular understands that let-name should be bound to the value of $implicit from the context.

Example #2

In the following example, you are passing a context object with named properties (name and age) to an Angular template using *ngTemplateOutlet.

*.component.ts

userName = 'Peter';
age = 25;

*.component.html

<ng-template #showName let-name="name" let-age="age">
  <p>{{ name }} : {{ age }}</p>
</ng-template>

<div *ngTemplateOutlet="showName; context: { name: userName, age: age }"></div>