Sign in
Skip to solution
mediumFrontend

What are ng-container and ng-template?

524 views
01

Understand the problem

Explain structural helpers.

ng-containerng-template
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

<ng-container> is a grouping element that renders no DOM — useful for applying structural directives without adding a wrapper. <ng-template> defines a template that isn't rendered until instantiated (by *ngIf, ngTemplateOutlet, etc.).

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

ng-container (no wrapper) + ng-template (else)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <!-- ng-container: apply *ngIf without an extra wrapper element -->
    <ng-container *ngIf="loggedIn; else guest">
      <span>Welcome back!</span>
    </ng-container>

    <!-- ng-template: rendered only when the else branch fires -->
    <ng-template #guest><span>Please sign in.</span></ng-template>
  `,
})
export class AppComponent {
  loggedIn = false;
}
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 52 of 121 decoded in the Angular track. One more won't hurt.

Back to track