AngularHow-ToBeginner · 3 min read

How to Use ngTemplateOutlet in Angular: Simple Guide

Use ngTemplateOutlet to insert an Angular <ng-template> dynamically into your component's template. Bind the template reference to [ngTemplateOutlet] to render its content where needed.

📐

Syntax

The ngTemplateOutlet directive inserts an <ng-template> into the DOM at the location where it is used. You bind a template reference variable to [ngTemplateOutlet] to display that template.

<ng-template #templateRef>: Defines a reusable template with a reference name.
<ng-container [ngTemplateOutlet]="templateRef"></ng-container>: Inserts the template content here.

html

<ng-template #myTemplate>
  <p>This is inside the template!</p>
</ng-template>

<ng-container [ngTemplateOutlet]="myTemplate"></ng-container>

Output

This is inside the template!

💻

Example

This example shows how to define a template and insert it dynamically using ngTemplateOutlet. The template content appears where the ng-container is placed.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-template #greetingTemplate>
      <h2>Hello, Angular!</h2>
      <p>This content is from the template.</p>
    </ng-template>

    <div>
      <ng-container [ngTemplateOutlet]="greetingTemplate"></ng-container>
    </div>
  `
})
export class AppComponent {}

Output

<h2>Hello, Angular!</h2> <p>This content is from the template.</p>

⚠️

Common Pitfalls

Common mistakes when using ngTemplateOutlet include:

Forgetting to define the <ng-template> with a reference variable.
Trying to bind a non-template value to [ngTemplateOutlet].
Not using <ng-container> or a suitable host element to insert the template.

Always ensure the template reference is correct and the template exists in the component.

angular

/* Wrong: Binding a string instead of a template reference */
<ng-container [ngTemplateOutlet]="'notATemplate'"></ng-container>

/* Right: Binding a template reference variable */
<ng-template #myTpl><p>Valid template</p></ng-template>
<ng-container [ngTemplateOutlet]="myTpl"></ng-container>

📊

Quick Reference

Tips for using ngTemplateOutlet:

Use <ng-template> to define reusable template blocks.
Insert templates with <ng-container [ngTemplateOutlet]="templateRef">.
You can pass context data with [ngTemplateOutletContext] if needed.
Templates are not rendered until inserted with ngTemplateOutlet.

✅

Key Takeaways

Use ngTemplateOutlet to insert <ng-template> content dynamically in Angular templates.

Always define templates with a reference variable using #templateName.

Bind the template reference to [ngTemplateOutlet] inside an <ng-container> or similar element.

Avoid binding non-template values to ngTemplateOutlet to prevent errors.

You can pass data to templates using [ngTemplateOutletContext] for dynamic content.