3 - New Template Syntax: @if, @for, @defer

<!-- Old syntax: verbose and fragmented -->
<div *ngIf="user; else loadingTpl">
  <h2>{{ user.name }}</h2>
  <div *ngIf="user.role === 'admin'; else userTpl">
    <span class="badge admin">Administrator</span>
  </div>
  <ng-template #userTpl>
    <span class="badge user">User</span>
  </ng-template>
</div>
<ng-template #loadingTpl>
  <div class="spinner">Loading...</div>
</ng-template>
    

<!-- New syntax: clear and linear -->
@if (user) {
  <h2>{{ user.name }}</h2>
  @if (user.role === 'admin') {
    <span class="badge admin">Administrator</span>
  } @else {
    <span class="badge user">User</span>
  }
} @else {
  <div class="spinner">Loading...</div>
}
    

<!-- Simple condition -->
@if (isLoggedIn()) {
  <app-dashboard />
}

<!-- If with else -->
@if (user()) {
  <h2>Welcome, {{ user().name }}</h2>
} @else {
  <app-login-form />
}

<!-- If / else if / else -->
@if (status() === 'loading') {
  <div class="spinner">Loading...</div>
} @else if (status() === 'error') {
  <div class="error">An error occurred</div>
} @else if (status() === 'empty') {
  <div class="empty">No results found</div>
} @else {
  <app-data-table [data]="data()" />
}
    

<!-- Save the condition result in a local variable -->
@if (currentUser(); as user) {
  <div class="profile">
    <h3>{{ user.name }}</h3>
    <p>Email: {{ user.email }}</p>
    <p>Role: {{ user.role }}</p>
  </div>
}

<!-- Useful with async pipes or transformations -->
@if (users() | filterActive; as activeUsers) {
  <p>Active users: {{ activeUsers.length }}</p>
}
    

<!-- Basic iteration with track by id -->
@for (product of products(); track product.id) {
  <div class="product-card">
    <h3>{{ product.name }}</h3>
    <p>{{ product.price | currency:'EUR' }}</p>
  </div>
}

<!-- With implicit variables -->
@for (item of items(); track item.id; let i = $index; let isFirst = $first; let isLast = $last) {
  <div class="item" [class.first]="isFirst" [class.last]="isLast">
    <span class="index">{{ i + 1 }}.</span>
    <span>{{ item.name }}</span>
  </div>
}

<!-- Track by index (for lists without unique id) -->
@for (label of labels(); track $index) {
  <span class="tag">{{ label }}</span>
}
    

// Component with a frequently updated list
@Component({
  selector: 'app-live-feed',
  standalone: true,
  template: `
    <!-- CORRECT: track by unique identity -->
    <!-- When the list changes, Angular reuses existing DOM nodes -->
    @for (post of posts(); track post.id) {
      <app-post-card [post]="post" />
    }

    <!-- DISCOURAGED: track by index -->
    <!-- If an element is added at the top, ALL nodes are recreated -->
    @for (post of posts(); track $index) {
      <app-post-card [post]="post" />
    }
  `
})
export class LiveFeedComponent {
  posts = signal<Post[]>([]);

  addNewPost(post: Post) {
    // With track post.id: only 1 DOM node created
    // With track $index: N DOM nodes recreated
    this.posts.update(list => [post, ...list]);
  }
}
    

<!-- BEFORE: ngSwitch (verbose, requires container) -->
<div [ngSwitch]="orderStatus">
  <div *ngSwitchCase="'pending'">
    <span class="badge warning">Pending</span>
  </div>
  <div *ngSwitchCase="'processing'">
    <span class="badge info">Processing</span>
  </div>
  <div *ngSwitchCase="'shipped'">
    <span class="badge success">Shipped</span>
  </div>
  <div *ngSwitchCase="'delivered'">
    <span class="badge success">Delivered</span>
  </div>
  <div *ngSwitchDefault>
    <span class="badge">Unknown</span>
  </div>
</div>

<!-- AFTER: @switch (clean, no container) -->
@switch (orderStatus()) {
  @case ('pending') {
    <span class="badge warning">Pending</span>
  }
  @case ('processing') {
    <span class="badge info">Processing</span>
  }
  @case ('shipped') {
    <span class="badge success">Shipped</span>
  }
  @case ('delivered') {
    <span class="badge success">Delivered</span>
  }
  @default {
    <span class="badge">Unknown</span>
  }
}
    

@defer (on viewport) {
  <!-- Lazily loaded content -->
  <app-heavy-chart [data]="chartData()" />
} @placeholder {
  <!-- Shown before loading begins -->
  <div class="chart-placeholder">
    <p>The chart will appear here</p>
  </div>
} @loading (after 150ms; minimum 300ms) {
  <!-- Shown while the chunk is downloading -->
  <div class="spinner">Loading chart...</div>
} @error {
  <!-- Shown if loading fails -->
  <div class="error">Unable to load the chart</div>
}
    

<!-- 1. on viewport: loads when the element enters the viewport -->
@defer (on viewport) {
  <app-comments [postId]="postId()" />
} @placeholder {
  <div style="height: 200px">Scroll to see comments</div>
}

<!-- 2. on idle: loads when the browser is idle -->
@defer (on idle) {
  <app-analytics-widget />
}

<!-- 3. on interaction: loads on click/focus on a specific element -->
<button #loadBtn>Show details</button>
@defer (on interaction(loadBtn)) {
  <app-product-details [id]="productId()" />
} @placeholder {
  <p>Click the button to see details</p>
}

<!-- 4. on hover: loads when the mouse hovers over an element -->
<div #previewArea>Hover for preview</div>
@defer (on hover(previewArea)) {
  <app-image-preview [url]="imageUrl()" />
}

<!-- 5. on timer: loads after a time interval -->
@defer (on timer(5s)) {
  <app-newsletter-popup />
}

<!-- 6. when: loads when a condition becomes true -->
@defer (when isAuthenticated()) {
  <app-admin-panel />
} @placeholder {
  <p>Log in to access the admin panel</p>
}

<!-- 7. Combining triggers -->
@defer (on viewport; on timer(10s)) {
  <app-sidebar-ads />
} @placeholder {
  <div class="ad-placeholder"></div>
}
    

<!-- Prefetch on idle, render on viewport -->
<!-- The browser downloads the chunk when idle, -->
<!-- but renders it only when it enters the viewport -->
@defer (on viewport; prefetch on idle) {
  <app-heavy-data-grid [data]="gridData()" />
} @placeholder {
  <div class="grid-skeleton">
    <div class="skeleton-row"></div>
    <div class="skeleton-row"></div>
    <div class="skeleton-row"></div>
  </div>
}

<!-- Prefetch on hover, render on interaction -->
<!-- The user hovers and the chunk downloads, -->
<!-- when they click the content appears instantly -->
<button #editBtn>Edit Profile</button>
@defer (on interaction(editBtn); prefetch on hover(editBtn)) {
  <app-profile-editor [user]="currentUser()" />
} @placeholder {
  <p>Click to edit your profile</p>
}
    

<!-- BEFORE: two separate directives -->
<div *ngIf="notifications.length === 0" class="empty-state">
  <p>No notifications</p>
</div>
<div *ngFor="let notification of notifications">
  {{ notification.message }}
</div>

<!-- AFTER: integrated into the control flow -->
@for (notification of notifications(); track notification.id) {
  <div class="notification" [class]="notification.type">
    <span class="icon">{{ notification.icon }}</span>
    <p>{{ notification.message }}</p>
    <time>{{ notification.date | date:'short' }}</time>
  </div>
} @empty {
  <div class="empty-state">
    <img src="/assets/no-notifications.svg" alt="No notifications" />
    <h3>All caught up!</h3>
    <p>You have no notifications at the moment.</p>
  </div>
}
    

# Automatic control flow migration
ng generate @angular/core:control-flow-migration

# The command:
# 1. Analyzes all application templates
# 2. Converts *ngIf -> @if
# 3. Converts *ngFor -> @for (with track $index as default)
# 4. Converts ngSwitch -> @switch
# 5. Removes CommonModule imports where no longer needed

# For a single component
ng generate @angular/core:control-flow-migration --path=src/app/components/my-component

# For a dry run (preview without modifying files)
ng generate @angular/core:control-flow-migration --dry-run
    

<!-- BEFORE migration -->
<div *ngIf="users$ | async as users; else loading">
  <table>
    <tr *ngFor="let user of users; trackBy: trackByUserId; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ user.name }}</td>
      <td [ngSwitch]="user.status">
        <span *ngSwitchCase="'active'" class="green">Active</span>
        <span *ngSwitchCase="'inactive'" class="red">Inactive</span>
        <span *ngSwitchDefault class="gray">N/A</span>
      </td>
    </tr>
  </table>
</div>
<ng-template #loading>
  <div class="spinner">Loading...</div>
</ng-template>

<!-- AFTER automatic migration -->
@if (users$ | async; as users) {
  <table>
    @for (user of users; track user.id; let i = $index) {
      <tr>
        <td>{{ i + 1 }}</td>
        <td>{{ user.name }}</td>
        <td>
          @switch (user.status) {
            @case ('active') {
              <span class="green">Active</span>
            }
            @case ('inactive') {
              <span class="red">Inactive</span>
            }
            @default {
              <span class="gray">N/A</span>
            }
          }
        </td>
      </tr>
    }
  </table>
} @else {
  <div class="spinner">Loading...</div>
}
    

<div class="dashboard">
  <!-- Header always visible -->
  <header>
    <h1>Dashboard</h1>
    @if (user(); as u) {
      <span>Welcome, {{ u.name }}</span>
    }
  </header>

  <!-- KPIs loaded immediately when idle -->
  @defer (on idle) {
    <app-kpi-cards [metrics]="kpiData()" />
  } @placeholder {
    <div class="kpi-skeleton">
      @for (i of [1,2,3,4]; track $index) {
        <div class="skeleton-card"></div>
      }
    </div>
  }

  <!-- Chart loaded when it enters the viewport -->
  @defer (on viewport; prefetch on idle) {
    <app-revenue-chart [data]="revenueData()" />
  } @placeholder {
    <div class="chart-placeholder" style="height: 400px">
      <p>Revenue chart</p>
    </div>
  } @loading (after 200ms) {
    <div class="spinner">Loading chart...</div>
  }

  <!-- Data table loaded on demand -->
  <button #showTable>Show details</button>
  @defer (on interaction(showTable); prefetch on hover(showTable)) {
    @if (tableData(); as data) {
      @for (row of data; track row.id) {
        <app-data-row [row]="row" />
      } @empty {
        <p>No data available for the selected period</p>
      }
    }
  } @placeholder {
    <p>Click to view details</p>
  }
</div>
    

<div class="product-list">
  <!-- Filters -->
  <div class="filters">
    @for (category of categories(); track category.id) {
      <button
        [class.active]="selectedCategory() === category.id"
        (click)="selectCategory(category.id)">
        {{ category.name }}
        <span class="count">({{ category.count }})</span>
      </button>
    }
  </div>

  <!-- Loading state -->
  @if (isLoading()) {
    <div class="loading">
      @for (i of [1,2,3]; track $index) {
        <div class="product-skeleton"></div>
      }
    </div>
  } @else {
    <!-- Product list -->
    @for (product of filteredProducts(); track product.id) {
      <div class="product-card">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>

        @switch (product.availability) {
          @case ('in_stock') {
            <span class="badge success">In Stock</span>
          }
          @case ('low_stock') {
            <span class="badge warning">Low Stock ({{ product.stock }})</span>
          }
          @case ('out_of_stock') {
            <span class="badge danger">Out of Stock</span>
          }
        }

        <div class="price">{{ product.price | currency:'EUR' }}</div>
      </div>
    } @empty {
      <div class="empty-state">
        <h3>No products found</h3>
        <p>Try adjusting your search filters</p>
        <button (click)="resetFilters()">Reset filters</button>
      </div>
    }
  }
</div>
    

@Component({
  selector: 'app-settings-page',
  standalone: true,
  template: `
    <h1>Settings</h1>

    <!-- Profile section: always available -->
    <app-profile-settings />

    <!-- Admin panel: loaded only if the user is admin -->
    @defer (when isAdmin()) {
      <app-admin-settings />
    } @placeholder {
      @if (!isAdmin()) {
        <div class="restricted">
          <p>Access restricted to administrators</p>
        </div>
      }
    }

    <!-- Advanced settings: defer + condition -->
    @if (showAdvanced()) {
      @defer (on idle) {
        <app-advanced-settings />
      } @loading {
        <div class="spinner">Loading advanced settings...</div>
      }
    }
  `
})
export class SettingsPageComponent {
  private authService = inject(AuthService);

  isAdmin = computed(() =>
    this.authService.currentUser()?.role === 'admin'
  );
  showAdvanced = signal(false);
}
    

<!-- MISTAKE 1: Track by $index on dynamic lists -->
<!-- If an element is inserted at the top, ALL DOM nodes are recreated -->
@for (user of users(); track $index) {
  <app-user-card [user]="user" />  <!-- Unnecessarily recreated! -->
}
<!-- FIX: track user.id -->

<!-- MISTAKE 2: @defer without placeholder -->
<!-- The user sees empty space without understanding what is happening -->
@defer (on viewport) {
  <app-comments />
}
<!-- FIX: add @placeholder with visual indication -->

<!-- MISTAKE 3: @defer for critical above-the-fold content -->
<!-- Main content must not be lazy loaded -->
@defer (on idle) {
  <app-hero-section />  <!-- NEVER! The hero must be immediate -->
}

<!-- MISTAKE 4: Excessive nesting -->
@if (condition1()) {
  @for (item of items(); track item.id) {
    @if (item.visible) {
      @switch (item.type) {
        @case ('A') {
          @for (sub of item.children; track sub.id) {
            <!-- Too deeply nested! Extract a component -->
          }
        }
      }
    }
  }
}
<!-- FIX: extract sub-components to reduce nesting -->