iTechGuides 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
In Angular, choose the rendering API based on what needs to change: use bindings and control-flow blocks for ordinary state-driven UI, NgTemplateOutlet for reusable template fragments, and NgComponentOutlet when you need to select a component type at runtime. For TypeScript-driven creation, use ViewContainerRef.
Start with bindings and control flow for state-driven UI
Angular templates connect component state to the rendered page. Use interpolation to display a value, property binding to set a DOM property, the attr. prefix to bind an HTML attribute, and parentheses to listen for an event. Angular’s template essentials guide shows these basics and how a template can read changing values, including signals.
<h2>{{ title() }}</h2>
<button [disabled]="saving()" (click)="save()">Save</button>
@if (showDetails()) {
<p>{{ details() }}</p>
}
@for (item of items(); track item.id) {
<p>{{ item.name }}</p>
}Use @if when content should appear conditionally and @for when it should repeat for a collection. The track expression associates each item with rendered DOM elements. Follow the syntax supported by the Angular version used by your project; Angular’s template documentation is the reference for current syntax.
Free tools Windows power users keep installed
One-click scans. No signup required.
Render a reusable template fragment with NgTemplateOutlet
An <ng-template> declares a fragment, but Angular does not display its contents just because the declaration exists. Angular represents the fragment as a TemplateRef. Give it a template reference, then render it at a location with NgTemplateOutlet. An <ng-container> is useful as the outlet location because it does not add a wrapper element to the DOM.
#1 Best Overall
<ng-template #message>
<p>The operation is complete.</p>
</ng-template>
<ng-container *ngTemplateOutlet="message"></ng-container>This declarative pattern is useful when a view chooses among prepared fragments, or when a reusable piece of markup should be rendered in a particular spot. See Angular’s guides to ng-template and ng-container.
Pass data through the template context
Use a context object to provide values to a fragment. The $implicit property supplies the default value for a let- declaration; a named context key is matched by naming that key in the declaration.
<ng-template #row let-item let-position="index">
<p>{{ position }}: {{ item.name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { $implicit: selectedItem, index: selectedIndex }">
</ng-container>Here, item receives $implicit, while position receives the context’s index value. Treat the context keys and let- declarations as the fragment’s data contract.
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 minutePC 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 & 11Understand declaration context and injectors
A fragment’s expressions are evaluated in the component where the <ng-template> was declared, even when the fragment is rendered somewhere else. By default, its injector context also follows the declaration site. If a fragment needs a different dependency context, Angular allows an injector to be supplied; NgTemplateOutlet also documents an 'outlet' option to inherit the injector at the insertion location. That can matter in recursive structures or when providers are scoped to an outlet.
Rank #3
Create an embedded view from TypeScript when needed
Use ViewContainerRef.createEmbeddedView when the code, rather than a template outlet, should decide when to create a prepared fragment. Pass the TemplateRef and, when needed, its context object.
const view = this.viewContainer.createEmbeddedView(
this.rowTemplate,
{ $implicit: this.selectedItem, index: this.selectedIndex }
);This is the programmatic counterpart to rendering a fragment with NgTemplateOutlet. Angular’s programmatic rendering guide covers creating views through ViewContainerRef. The example assumes the component has already obtained a ViewContainerRef and a TemplateRef; their acquisition depends on how the component and template are structured.
Use NgComponentOutlet when the changing unit is a component
If the choice at runtime is a component type—not just a block of reusable markup—use NgComponentOutlet for declarative rendering. It instantiates the selected component in the current view. Its API supports an inputs object, an injector and environment injector, projected content, and NgModule configuration. Consult the NgComponentOutlet API reference for the options available in your Angular version.
<ng-container *ngComponentOutlet="activeComponent; inputs: componentInputs">
</ng-container>The values of activeComponent and componentInputs are supplied by the host component. Use this approach when the selected unit has its own component behavior, inputs, or view. For code-driven component creation and more imperative control, use ViewContainerRef, as described in Angular’s programmatic rendering guide.
Choose the rendering approach by what varies
| Approach | Dynamic unit | How data is supplied | Control style |
|---|---|---|---|
| Bindings and control flow | Values, conditional sections, or repeated items | Component state read by the template | Declarative template syntax |
NgTemplateOutlet |
Prepared markup fragment (TemplateRef) |
Context object and let- locals |
Declarative outlet |
ViewContainerRef.createEmbeddedView |
Prepared markup fragment (TemplateRef) |
Context object and let- locals |
Programmatic creation |
NgComponentOutlet |
Component type | Component inputs and outlet configuration | Declarative outlet |
ViewContainerRef for components |
Component type | Component creation and configuration in code | Programmatic creation |
For an outlet placeholder that should not introduce a real wrapper, use <ng-container>. The choice between a fragment and a component is about the unit you need to vary, not a universal performance ranking: the cited Angular API documentation describes behavior and configuration, not comparative benchmarks.
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.
