Evaluating Complex Branching with Built-in Switch Control Flow

import { Component, input } from '@angular/core';
 
export type UserStatus = 'pending' | 'active' | 'suspended' | 'archived';
 
@Component({
  selector: 'app-status-badge',
  standalone: true,
  template: `
    @switch (status()) {
      @case ('active') {
        <span class="badge badge-success">Account Active</span>
      }
      @case ('pending') {
        <span class="badge badge-warning">Verification Required</span>
      }
      @case ('suspended') {
        <span class="badge badge-danger">Account Locked</span>
      }
      @default {
        <span class="badge badge-neutral">Status Unknown</span>
      }
    }
  `
})
export class StatusBadgeComponent {
  readonly status = input.required<UserStatus>();
}