Free tools Windows power users keep installed
One-click scans. No signup required.
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:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#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:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Rank #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.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallQuick 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.
