Lab 14: Standalone & Control Flow

📖 Resources

• Control Flow Documentation
• Standalone Components

🚀 Starter Code

step-12-album-wholesale-v21-pre-control-flow

This is a v21 standalone app that still uses the old structural directive syntax (*ngIf, *ngFor, [ngSwitch]). Your job is to modernise the templates by converting them to Angular’s new built-in control flow syntax introduced in Angular 17.

In this lab, you’ll replace Angular’s structural directives with the new control flow syntax. You’ll convert *ngIf to @if/@else, *ngFor to @for with track, and [ngSwitch] to @switch/@case.

📝 Instructions

Step 1: Replace *ngIf with @if

<!-- Before -->
<div *ngIf="loading">Loading...</div>

<!-- After -->
@if (loading) {
  <div>Loading...</div>
}

With else:

@if (loading) {
  <div>Loading...</div>
} @else {
  <div>Content</div>
}

Step 2: Replace *ngFor with @for

<!-- Before -->
<div *ngFor="let album of albums; trackBy: trackByFn">
  {{ album.name }}
</div>

<!-- After -->
@for (album of albums; track album.id) {
  <div>{{ album.name }}</div>
}

Step 3: Replace [ngSwitch] with @switch

<!-- Before -->
<div [ngSwitch]="status">
  <span *ngSwitchCase="'active'">Active</span>
  <span *ngSwitchDefault>Inactive</span>
</div>

<!-- After -->
@switch (status) {
  @case ('active') { <span>Active</span> }
  @default { <span>Inactive</span> }
}