mediumFrontend

What are ng-container and ng-template?

Q: What are ng-container and ng-template?

**Core concept.** <ng-container> is a **logical grouping** element that renders **no DOM** of its own — perfect for applying a structural directive (or several) without adding a wrapper. <ng-template> defines a block of markup that is **not rendered** until something instantiates it (an *ngIf "else", ngTemplateOutlet , etc.). <ng-container> groups directives renders NO element <ng-templat

524 views

Understand the problem

Explain structural helpers.

ng-containerng-template

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

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;
}

Join the discussion

Discussion (0)

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

What is the difference between Observables and Promises?

What is ngTemplateOutlet?