Legacy *ngIf and *ngFor — Structural Directives

The legacy structural directives *ngIf and *ngFor are still widely used in existing Angular codebases and third-party component libraries. Understanding them is essential for reading and maintaining existing code, and for using Angular Material components and other library components that still use the directive syntax. Structural directives are distinguished by the asterisk (*) prefix — they transform the DOM structure by creating, moving, or destroying DOM elements.

*ngIf and *ngFor Patterns #

// Import NgIf and NgFor for standalone components (or import CommonModule)
import { NgIf, NgFor, AsyncPipe } from '@angular/common';

@Component({
  standalone:  true,
  imports:    [NgIf, NgFor, AsyncPipe],
  template: `
    <!-- ── *ngIf — basic conditional ────────────────────────────────────── -->
    <div *ngIf="isLoggedIn">Welcome back!</div>

    <!-- ── *ngIf with else ──────────────────────────────────────────────── -->
    <div *ngIf="post; else loading">
      <h1>{{ post.title }}</h1>
    </div>
    <ng-template #loading>
      <app-spinner />
    </ng-template>

    <!-- ── *ngIf as — capture value in template variable ─────────────────── -->
    <div *ngIf="posts$ | async as posts; else noData">
      <p>{{ posts.length }} posts loaded</p>
      <!-- Use 'posts' (typed as PostDto[], not Observable) within this block -->
    </div>
    <ng-template #noData><p>Loading...</p></ng-template>

    <!-- ── *ngFor — basic list ────────────────────────────────────────────── -->
    <ul>
      <li *ngFor="let post of posts; trackBy: trackByPostId">
        {{ post.title }}
      </li>
    </ul>

    <!-- ── *ngFor with index and last variables ──────────────────────────── -->
    <div *ngFor="let tag of tags; let i = index; let isLast = last">
      {{ i + 1 }}. {{ tag }}{{ isLast ? '' : ', ' }}
    </div>

    <!-- ── ng-container — structural wrapper without a DOM element ─────────── -->
    <ng-container *ngIf="canEdit">
      <button>Edit</button>
      <button>Delete</button>
      <!-- No wrapping div in the DOM — ng-container renders nothing itself -->
    </ng-container>
  `,
})
export class PostListLegacyComponent {
  posts$     = this.service.getPublished();
  posts:     PostSummaryDto[] = [];
  tags:      string[] = [];
  isLoggedIn = true;
  canEdit    = false;

  trackByPostId(index: number, post: PostSummaryDto): number {
    return post.id;  // stable identity for DOM recycling
  }
}

Common Mistakes #

Mistake 1 — Two structural directives on the same element (compile error) #

❌ Wrong — <tr *ngIf="show" *ngFor="let row of rows">; Angular cannot have two structural directives on one element.

✅ Correct — wrap in ng-container: <ng-container *ngFor="let row of rows"><tr *ngIf="row.visible">.

Mistake 2 — Not using trackBy for *ngFor with API data (full DOM recreation on every update) #

❌ Wrong — *ngFor="let post of posts"; every navigation or filter recreates all DOM nodes.

✅ Correct — *ngFor="let post of posts; trackBy: trackByPostId".