Template-Steuerungsfluss mit typsicheren Let-Deklarationen und Empty-Fallback

import { Component, input } from '@angular/core';
 
export type LoadingState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: readonly T[] }
  | { status: 'error'; message: string };
 
@Component({
  selector: 'app-item-list',
  standalone: true,
  template: `
    @let state = stateInput();
    @switch (state.status) {
      @case ('loading') {
        <div class="spinner">Loading records...</div>
      }
      @case ('success') {
        <ul>
          @for (item of state.data; track item.id; let idx = $index) {
            <li>{{ idx + 1 }}. {{ item.name }}</li>
          } @empty {
            <li class="empty-hint">No items found in dataset.</li>
          }
        </ul>
      }
      @case ('error') {
        <p class="error-text">{{ state.message }}</p>
      }
    }
  `
})
export class ItemListComponent {
  readonly stateInput = input.required<LoadingState<{ id: string; name: string }>>();
}