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 reinstalliTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use <ng-template> to define Angular markup that stays out of the rendered page until you instantiate it. Capture it as a TemplateRef, then render it declaratively with NgTemplateOutlet or programmatically with ViewContainerRef.createEmbeddedView().
Declare a fragment with <ng-template>
An <ng-template> is a prepared view, not a visible wrapper element. Angular does not render its contents unless an outlet, a view container, or a directive instantiates the fragment. A reference variable on the template gives you access to its TemplateRef in that template.
<p>This is rendered normally.</p>
<ng-template #notice>
<p>This fragment appears only when instantiated.</p>
</ng-template>Here, #notice refers to the template fragment, not to a DOM element. A TemplateRef can also be obtained through a query or by injecting it into a directive attached to the <ng-template>. See Angular’s template fragments guide and ng-template API.
Render a fragment declaratively with NgTemplateOutlet
Use NgTemplateOutlet when the fragment to render and its context can be expressed in template markup. Import NgTemplateOutlet from @angular/common in the component’s imports, then place the outlet where the embedded view should appear. Angular recommends using an <ng-container> as the outlet host; it does not add a DOM element.
#1 Best Overall
<ng-container *ngTemplateOutlet="notice"></ng-container>The outlet inserts the fragment at its location. The Angular guide to ng-container explains its role in grouping template content without adding an element to the rendered DOM.
Pass data through the fragment context
A fragment can declare local variables with let- attributes. The value after the equals sign names the context property to read. In this example, let-name="person" binds the local variable name to the context’s person property:
<ng-template #greeting let-name="person">
<p>Hello, {{ name }}.</p>
</ng-template>
<ng-container
*ngTemplateOutlet="greeting; context: { person: 'Rae' }">
</ng-container>When a declaration has no explicit context key, such as let-item, Angular reads the $implicit property. For example, a context of { $implicit: 'Rae' } supplies the value to item. The context passed to NgTemplateOutlet is also the second argument to createEmbeddedView().
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteChoose between an outlet and a view container
| Rendering option | Use it when | Where the view is created |
|---|---|---|
NgTemplateOutlet |
The template can express which fragment to render and what context to pass. | At the declarative outlet, commonly an <ng-container>. |
ViewContainerRef.createEmbeddedView() |
Component or directive code must decide when to instantiate the fragment. | At the injected view container; Angular documents the view as the next sibling of the component or directive that injected it. |
Instantiate a fragment from TypeScript
Inject a ViewContainerRef and call createEmbeddedView() with the fragment’s TemplateRef, and optionally a context object. This is useful when TypeScript logic determines whether or when to create the view.
Rank #3
const view = this.viewContainer.createEmbeddedView(this.template, {
person: 'Rae',
});In this example, template represents a TemplateRef obtained from a query or another source. If the template comes from an optional input or query, check that it exists before calling createEmbeddedView(). The method and placement behavior are documented in Angular’s ng-template API.
Understand declaration scope and injector context
Angular evaluates a fragment’s expressions against the component where the fragment was declared, even if another location renders it. As Angular’s guide puts it: “Expressions or statements in a template fragment are evaluated against the component in which the fragment is declared, regardless of where the fragment is rendered.”
Injector context is separate from expression scope. By default, a fragment uses the injector from its declaration location. You can pass a custom injector to NgTemplateOutlet; its 'outlet' option makes the embedded view inherit from the outlet location. Angular notes that this can help with recursive structures and providers scoped at each outlet level. These injector options are described in the NgTemplateOutlet API.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →How structural directive shorthand relates
The asterisk syntax used by structural directives is shorthand for an <ng-template> wrapper. For example, applying *myDirective to a <section> is shorthand for an <ng-template myDirective> that contains that section. Directives use this mechanism to create content conditionally or multiple times. The template fragments guide and ng-template API describe this relationship.
For queries, match the syntax to the Angular version you target: the current guide uses signal-style query APIs, while Angular v18 documentation demonstrates decorator-based @ViewChild.
Quick Recap
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.
