Angular › New Control Flow Syntax (@if, @for & @switch)

How does the new at switch control flow block let you handle multiple possible conditions cleanly?

Intermediate

Answer

The at switch block lets you check a single value against several possible cases, rendering different content for each matching case, similar to a switch statement in regular programming, and providing an at default case for anything that does not match any of the specific cases listed.

@Component({
  selector: 'app-status-badge',
  template: `
    @switch (status) {
      @case ('active') { <span class="green">Active</span> }
      @case ('pending') { <span class="yellow">Pending</span> }
      @default { <span class="gray">Unknown</span> }
    }
  `
})
export class StatusBadgeComponent {
  status = 'active';
}

Real-world example An order tracking page displays a differently colored badge depending on whether an order's status is active, pending, or something else entirely, using the at switch block instead of a long chain of at if and at else if conditions.

Common follow-ups: How is this new syntax different from the older ngSwitch directive in terms of readability?;What happens if none of the case values match and there is no at default case provided?

Components & Templates;Design Patterns in Angular