mediumFrontend

What is ngTemplateOutlet?

Q: What is ngTemplateOutlet?

**Core concept.** [ngTemplateOutlet] is a structural directive that **renders an <ng-template> ** you point it at, optionally passing **context** data. It's how you reuse a template block in several places and parameterize it — Angular's lightweight equivalent of a render prop / slot with data. <ng-template #row> defined once <rect class='d-box-accent' x='270' y='40' width='160' he

497 views

Understand the problem

Explain ngTemplateOutlet.

ngtemplateoutlet

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Reuse a template with context

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ng-template #greet let-name let-role="role">
      <p>{{ name }} — {{ role }}</p>
    </ng-template>

    <!-- render the SAME template twice with different context -->
    <ng-container *ngTemplateOutlet="greet; context: { $implicit: 'Ada', role: 'Eng' }"></ng-container>
    <ng-container *ngTemplateOutlet="greet; context: { $implicit: 'Grace', role: 'Sci' }"></ng-container>
  `,
})
export class AppComponent {}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are ng-container and ng-template?

How do you pass data between sibling components that don't have a direct parent-child relationship?