Multi-Branch State Rendering via Template Switch Blocks

import { Component, signal } from '@angular/core';
 
type OrderStatus = 'pending' | 'shipped' | 'delivered' | 'cancelled';
 
@Component({
  selector: 'app-order-status',
  standalone: true,
  template: `
    @switch (status()) {
      @case ('pending') {
        <span class="badge yellow">Order received, preparing shipment.</span>
      }
      @case ('shipped') {
        <span class="badge blue">Package is in transit.</span>
      }
      @case ('delivered') {
        <span class="badge green">Package delivered successfully.</span>
      }
      @default {
        <span class="badge red">Order was cancelled or in unknown state.</span>
      }
    }
  `
})
export class OrderStatusComponent {
  status = signal<OrderStatus>('pending');
}