Use Angular’s NgTemplateOutlet directive to render an <ng-template> where you choose and pass it a context object for values. It is the declarative option for inserting a prepared template; use ViewContainerRef when TypeScript needs to create and insert the embedded view directly.
What ngTemplateOutlet does
An <ng-template> declares a template fragment that Angular does not render by itself. Angular represents that fragment as a TemplateRef. NgTemplateOutlet inserts an embedded view from a prepared TemplateRef at the outlet location. See Angular’s NgTemplateOutlet API and template-fragment guide.
Put the directive on <ng-container> when you want to render the fragment without adding an extra wrapper element to the DOM.
Render a template with ngTemplateOutlet
In a standalone component, import NgTemplateOutlet from @angular/common and include it in the component’s imports:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
import {Component} from '@angular/core';
import {NgTemplateOutlet} from '@angular/common';
@Component({
standalone: true,
imports: [NgTemplateOutlet],
template: `
<ng-template #greeting let-name>
<p>Hello {{ name }}!</p>
</ng-template>
<ng-container
*ngTemplateOutlet="greeting; context: { $implicit: userName }">
</ng-container>
`,
})
export class GreetingComponent {
userName = 'Ada';
}The greeting reference identifies the fragment, and the outlet renders it at that location. The component must make the directive available through its imports or its Angular module configuration.
Pass values through the template context
Pass a context object either with the context option in microsyntax or with the explicit [ngTemplateOutletContext] input. Each context key is available to a matching let- declaration inside the template.
<ng-template #item let-label="label" let-value>
<strong>{{ label }}:</strong> {{ value }}
</ng-template>
<ng-container
[ngTemplateOutlet]="item"
[ngTemplateOutletContext]="{label: 'Status', $implicit: 'Ready'}">
</ng-container>Here, let-label="label" reads the context’s label key. The unkeyed let-value reads $implicit, so it receives Ready. Use $implicit for the default value; use named keys when a template needs several values.
Choose between template fragments
Keep references to the available fragments and bind the outlet to whichever one the component selects:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchRank #3
<ng-container [ngTemplateOutlet]="isAdmin ? admin : basic"></ng-container>
<ng-template #admin>Admin profile</ng-template>
<ng-template #basic>Basic profile</ng-template>The conditional expression chooses the template reference; the outlet renders the selected fragment. Angular documents this approach in its template-fragment guide.
Control which injector the embedded view uses
By default, the embedded view uses the injector from the template’s declaration location. Bind [ngTemplateOutletInjector] to provide a custom injector when needed. Angular also supports the special value "outlet", which makes the view inherit the injector from the outlet location—a useful option in recursive or provider-scoped component trees. See the NgTemplateOutlet API for the input details.
When to use ViewContainerRef instead
Use NgTemplateOutlet when the template selection and context can be expressed in the component’s template. Use TemplateRef.createEmbeddedView() or ViewContainerRef.createEmbeddedView() when TypeScript must control view creation and insertion directly. Angular’s TemplateRef API describes the template reference and its createEmbeddedView(context, injector?) method; see also ViewContainerRef.
| Need | Use |
|---|---|
| Render a referenced template at a declarative outlet | NgTemplateOutlet |
Supply values to let- declarations |
ngTemplateOutletContext |
| Create and insert an embedded view directly from TypeScript | TemplateRef.createEmbeddedView() or ViewContainerRef.createEmbeddedView() |
When reusable components accept templates, keep the reference correctly typed as TemplateRef<C> for the intended context shape. The generic context type is documented in Angular’s TemplateRef API.
Quick Recap
Common mistakes to avoid
- Expecting the fragment to render on its own: an
<ng-template>is inert until rendered through an outlet or a view container. - Mismatching context keys and declarations:
let-label="label"needs alabelkey; an unkeyed declaration such aslet-valuereads$implicit. - Forgetting to import the directive: make
NgTemplateOutletavailable in the standalone component’s imports or in the relevant module configuration. - Passing an unsuitable template reference: use a stable
TemplateRefwith a context type that matches the values the template reads.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
