Sign in
Skip to solution
mediumFrontend

What is ngTemplateOutlet?

497 views
01

Understand the problem

Explain ngTemplateOutlet.

ngtemplateoutlet
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

*ngTemplateOutlet renders a referenced <ng-template>, optionally passing a context object for its template variables. It enables reusable, customizable template snippets — e.g. letting a list component accept a custom item template from its parent.

Solution ready — 2 min read

Classified // press E to declassify

04

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 {}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 54 of 121 decoded in the Angular track. One more won't hurt.

Back to track