Load State

import { httpResource } from '@angular/common/http';

@Component({
  imports: [WrLoadState, WrLoadStateContent, WrList, WrListItem],
  template: `
    <wr-load-state [resource]="orders">
      <ng-template wrLoadStateContent [wrLoadStateContentOf]="orders" let-orders>
        <wr-list>
          @for (order of orders; track order.id) {
            <wr-list-item>{{ order.id }}</wr-list-item>
          }
        </wr-list>
      </ng-template>
    </wr-load-state>
  `,
})
export class Orders {
  readonly orders = httpResource<Order[]>(() => '/api/orders');
}

<wr-load-state [status]="status()" (retry)="load()">
  <ng-template wrLoadStateContent>Loaded.</ng-template>
</wr-load-state>

<wr-load-state [resource]="orders">
  <ng-template wrLoadStateLoading><wr-spinner /></ng-template>
  <ng-template wrLoadStateError let-error let-retry="retry" let-retrying="retrying">
    <wr-alert type="danger" title="Could not load orders" [message]="error.message">
      <wr-btn wrAlertActions size="sm" [loading]="retrying" (click)="retry()">Try again</wr-btn>
    </wr-alert>
  </ng-template>
  <ng-template wrLoadStateEmpty>
    <wr-empty title="No orders yet"><wr-btn wrEmptyActions size="sm">Create one</wr-btn></wr-empty>
  </ng-template>
  <ng-template wrLoadStateContent [wrLoadStateContentOf]="orders" let-orders>...</ng-template>
</wr-load-state>