ng-container, ng-template and Structural Directive Patterns

ng-container and ng-template are Angular’s template primitives that provide structural flexibility without adding DOM elements. ng-container is an invisible grouping element — it groups content and supports structural directives without adding a wrapper <div> that could break CSS grid or flexbox layouts. ng-template is a reusable template fragment — it renders nothing on its own but can be instantiated with ngTemplateOutlet, passed as an @Input to child components, or referenced in *ngIf; else patterns.

ng-container and ng-template #

import { NgTemplateOutlet, NgIf, NgFor } from '@angular/common';

@Component({
  standalone:  true,
  imports:    [NgTemplateOutlet, NgIf, NgFor],
  template: `
    <!-- ── ng-container — groups without adding a DOM element ───────────── -->
    <table>
      <tr>
        <!-- Apply *ngFor directly on tr without extra wrapper ──────────── -->
        <ng-container *ngFor="let col of columns">
          <th *ngIf="col.visible">{{ col.label }}</th>
        </ng-container>
      </tr>
      <tr *ngFor="let row of rows">
        <ng-container *ngFor="let col of columns">
          <td *ngIf="col.visible">{{ row[col.field] }}</td>
        </ng-container>
      </tr>
    </table>

    <!-- ── ng-template — reusable template fragment ──────────────────────── -->
    <ng-template #loadingTemplate>
      <div class="loading"><app-spinner /> Loading...</div>
    </ng-template>

    <ng-template #errorTemplate let-err="error">  <!-- context variable ─── -->
      <div class="error">Error: {{ err }}</div>
    </ng-template>

    <!-- ── ngTemplateOutlet — render a template fragment ─────────────────── -->
    <div *ngIf="isLoading; else contentTemplate">
      <ng-container [ngTemplateOutlet]="loadingTemplate" />
    </div>
    <ng-template #contentTemplate>
      <div>Content here</div>
    </ng-template>

    <!-- ngTemplateOutlet with context ───────────────────────────────────── -->
    <ng-container
      [ngTemplateOutlet]="errorTemplate"
      [ngTemplateOutletContext]="{ error: errorMessage }"
    />

    <!-- ── Pass template as @Input to child component ────────────────────── -->
    <app-data-table
      [rowTemplate]="customRowTemplate"
      [data]="tableData"
    />
    <ng-template #customRowTemplate let-row>
      <td>{{ row.title }}</td>
      <td>{{ row.status }}</td>
    </ng-template>
  `,
})
export class PostTableComponent {
  columns      = [{ field: 'title', label: 'Title', visible: true }, ...];
  rows         = signal<PostSummaryDto[]>([]);
  isLoading    = signal(false);
  errorMessage = signal<string | null>(null);
  tableData    = signal<any[]>([]);
}

// ── DataTable component accepting a template as @Input ─────────────────────
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector:   'app-data-table',
  standalone:  true,
  imports:    [NgFor, NgTemplateOutlet],
  template: `
    <table>
      <tbody>
        <tr *ngFor="let item of data">
          <!-- Render the parent-provided row template ─────────────────────── -->
          <ng-container
            [ngTemplateOutlet]="rowTemplate"
            [ngTemplateOutletContext]="{ $implicit: item }"
          />
        </tr>
      </tbody>
    </table>
  `,
})
export class DataTableComponent {
  @Input() rowTemplate!: TemplateRef<{ $implicit: any }>;
  @Input() data: any[] = [];
}

Common Mistakes #

Mistake 1 — Using <div> instead of <ng-container> as structural directive wrapper (breaks table/flex layout) #

❌ Wrong — <div *ngFor="let row of rows"><tr>; invalid HTML; div inside tbody breaks the table.

✅ Correct — <ng-container *ngFor="let row of rows"><tr>; no extra DOM element.

Mistake 2 — Confusing ng-template reference with TemplateRef and ElementRef types #

❌ Wrong — @ViewChild('tmpl') tmpl!: ElementRef; ng-template references are TemplateRef, not ElementRef.

✅ Correct — @ViewChild('tmpl') tmpl!: TemplateRef<any>.