resource, rxResource, httpResource

import { Component, resource, signal } from '@angular/core';

@Component({ /* ... */ })
export class UserProfile {
  readonly userId = signal<number | undefined>(1);

  readonly user = resource({
    // 1. params: eine reaktive Funktion. Ändert sich das Ergebnis → wird neu geladen.
    //    Liefert sie undefined → Status 'idle', der Loader läuft NICHT.
    params: () => this.userId(),

    // 2. loader: erhält params + ein AbortSignal (der alte Request wird automatisch abgebrochen)
    loader: async ({ params: id, abortSignal }) => {
      const res = await fetch(`/api/users/${id}`, { signal: abortSignal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return (await res.json()) as User;
    },
  });
}

user.value();      // Signal<T | undefined> — der letzte Wert (oder defaultValue)
user.hasValue();   // Type Guard: true, wenn value() nicht undefined ist
user.status();     // 'idle' | 'loading' | 'reloading' | 'resolved' | 'error' | 'local'
user.isLoading();  // true für 'loading' und 'reloading'
user.error();      // Error | undefined
user.reload();     // lädt mit denselben params neu (Status 'reloading', value bleibt)

// Lokales Schreiben (z. B. ein optimistisches Update) → Status wird 'local'
user.set(newUser);
user.update((u) => ({ ...u!, name: 'Neu' }));

user.asReadonly(); // ohne set/update bereitgestellt
user.snapshot();   // v21.2: { status, value | error } in einem einzigen Signal

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

export class UserSearch {
  readonly query = signal('');
  readonly role = signal<Role | ''>('');

  // Einfache Form: eine Funktion, die die URL liefert (undefined → idle)
  readonly user = httpResource<UserDto>(() => `/api/users/${this.userId()}`);

  // Vollständige Form: ein Request-Objekt + Optionen
  readonly users = httpResource<PageDto<UserDto>>(
    () => ({
      url: '/api/users',
      params: { q: this.query(), ...(this.role() ? { role: this.role() } : {}) },
      headers: { 'X-Client': 'atlas' },
    }),
    { defaultValue: { items: [], total: 0 } }, // value() ist nie mehr undefined
  );
}

// Andere Formate:
httpResource.text(() => '/api/readme');
httpResource.blob(() => `/api/files/${id()}`);
httpResource.arrayBuffer(() => '/api/binary');

import { z } from 'zod';

const UserSchema = z.object({ id: z.number(), name: z.string(), email: z.email() });

// `parse` validiert/transformiert die Response — der Fehler landet in user.error()
readonly user = httpResource(() => `/api/users/${this.id()}`, {
  parse: UserSchema.parse,
});

// oder Mapping DTO → Domänenmodell
readonly product = httpResource(() => `/api/products/${this.id()}`, {
  parse: (dto: ProductDto) => toProduct(dto),
});

import { rxResource } from '@angular/core/rxjs-interop';

export class Orders {
  private readonly api = inject(OrdersApi); // liefert Observables

  readonly status = signal<OrderStatus>('open');

  readonly orders = rxResource({
    params: () => ({ status: this.status() }),
    stream: ({ params }) => this.api.list(params.status), // Observable<Order[]>
    defaultValue: [],
  });
}
// Ändern sich die params, wird das alte Abonnement geschlossen (wie bei switchMap).
// Ein Stream kann mehrfach emittieren (z. B. ein WebSocket) — value() wird bei jeder Emission aktualisiert.

import { ResourceParamsStatus, resource } from '@angular/core';

// v22: In params kannst du einen speziellen Status „werfen“
readonly report = resource({
  params: () => {
    const range = this.range();
    if (!range) throw ResourceParamsStatus.IDLE;        // noch nichts zu laden
    if (!this.permissions.hasValue()) throw ResourceParamsStatus.LOADING; // wartet auf etwas anderes
    return range;
  },
  loader: ({ params }) => this.api.report(params),
});

// Resources verketten mit ctx.chain(): orders wartet auf user
readonly user = httpResource<User>(() => '/api/me');
readonly orders = httpResource<Order[]>((ctx) => {
  const user = ctx.chain(this.user);
  return user ? `/api/users/${user.id}/orders` : undefined;
});
// solange user lädt → ist orders 'loading'; wenn user einen Fehler hat → hat orders ebenfalls einen

// resource / httpResource sind zum LESEN (GET) gedacht.
// Zum Schreiben (POST/PUT/DELETE) nutzt du HttpClient direkt und aktualisierst danach die Resource.

export class TodoStore {
  private readonly http = inject(HttpClient);
  readonly todos = httpResource<Todo[]>(() => '/api/todos', { defaultValue: [] });

  async add(title: string) {
    const created = await firstValueFrom(this.http.post<Todo>('/api/todos', { title }));
    this.todos.update((list) => [...list, created]); // lokales Update, kein erneutes Laden
  }

  async remove(id: number) {
    this.todos.update((list) => list.filter((t) => t.id !== id)); // optimistisch
    try {
      await firstValueFrom(this.http.delete(`/api/todos/${id}`));
    } catch {
      this.todos.reload(); // einfacher Rollback: vom Server neu laden
    }
  }
}

resource({ params: () => p(), loader: async ({ params, abortSignal, previous }) => ... });
rxResource({ params: () => p(), stream: ({ params }) => obs$ });
httpResource<T>(() => url | { url, method, params, headers, body } | undefined, { defaultValue, parse });

r.value()  r.hasValue()  r.status()  r.isLoading()  r.error()  r.reload()  r.set()  r.update()

params → undefined            ⇒ 'idle'
params → throw ResourceParamsStatus.IDLE / LOADING   (v22)
(ctx) => ctx.chain(other)     ⇒ Verkettung              (v22)