wrAction

import { wrAction } from 'ngwr/utils';

@Component({
  template: `
    <button wr-btn [loading]="save.loading()" (click)="save.run(draft())">Save</button>
    @if (save.status() === 'error') {
      <wr-alert type="danger">Could not save.</wr-alert>
    }
  `,
})
export class DraftEditor {
  private readonly api = inject(DraftApi);
  readonly draft = signal<Draft>({ title: '' });
  readonly save = wrAction((draft: Draft) => this.api.save(draft));
}

import { wrKeyedAction } from 'ngwr/utils';

@Component({
  template: `
    @for (row of rows(); track row.id) {
      <button wr-btn size="sm" [loading]="remove.pending(row.id)" (click)="remove.run(row.id)">
        Remove
      </button>
    }
  `,
})
export class RowList {
  readonly remove = wrKeyedAction((id: string) => this.api.remove(id));
}

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

@Component({
  template: `<wr-table [items]="rows()" [loading]="users.isLoading()" />`,
})
export class Users {
  readonly page = signal(1);
  readonly users = httpResource<User[]>(() => `/api/users?page=${this.page()}`);
  readonly rows = wrResourceValue(this.users, []);
}