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 : une fonction réactive. Quand le résultat change → rechargement.
    //    Si elle renvoie undefined → statut 'idle', le loader ne s’exécute PAS.
    params: () => this.userId(),

    // 2. loader : reçoit params + un AbortSignal (l’ancienne requête est annulée automatiquement)
    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> — la dernière valeur (ou defaultValue)
user.hasValue();   // type guard : true si value() n’est pas undefined
user.status();     // 'idle' | 'loading' | 'reloading' | 'resolved' | 'error' | 'local'
user.isLoading();  // true pour 'loading' et 'reloading'
user.error();      // Error | undefined
user.reload();     // recharge avec les mêmes params (statut 'reloading', value reste)

// Écriture locale (par ex. mise à jour optimiste) → le statut devient 'local'
user.set(newUser);
user.update((u) => ({ ...u!, name: 'Nouveau' }));

user.asReadonly(); // exposé sans set/update
user.snapshot();   // v21.2 : { status, value | error } dans un seul signal

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

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

  // Forme simple : une fonction qui renvoie l’URL (undefined → idle)
  readonly user = httpResource<UserDto>(() => `/api/users/${this.userId()}`);

  // Forme complète : un objet de requête + des options
  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() n’est plus jamais undefined
  );
}

// Autres formats :
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` valide/transforme la réponse — l’erreur se retrouve dans user.error()
readonly user = httpResource(() => `/api/users/${this.id()}`, {
  parse: UserSchema.parse,
});

// ou mapping d’un DTO → modèle du domaine
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); // renvoie des Observables

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

  readonly orders = rxResource({
    params: () => ({ status: this.status() }),
    stream: ({ params }) => this.api.list(params.status), // Observable<Order[]>
    defaultValue: [],
  });
}
// Quand params change, l’ancien abonnement est fermé (comme switchMap).
// Un flux peut émettre plusieurs fois (par ex. un websocket) — value() se met à jour à chaque émission.

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

// v22 : dans params, vous pouvez « lancer » un statut spécial
readonly report = resource({
  params: () => {
    const range = this.range();
    if (!range) throw ResourceParamsStatus.IDLE;        // rien à charger pour l’instant
    if (!this.permissions.hasValue()) throw ResourceParamsStatus.LOADING; // en attente d’autre chose
    return range;
  },
  loader: ({ params }) => this.api.report(params),
});

// Chaînage de resources avec ctx.chain() : orders attend 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;
});
// tant que user charge → orders est 'loading' ; si user est en erreur → orders aussi

// resource / httpResource servent à LIRE (GET).
// Pour les écritures (POST/PUT/DELETE), utilisez HttpClient directement, puis mettez la resource à jour.

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]); // mise à jour locale, sans nouvelle requête
  }

  async remove(id: number) {
    this.todos.update((list) => list.filter((t) => t.id !== id)); // optimiste
    try {
      await firstValueFrom(this.http.delete(`/api/todos/${id}`));
    } catch {
      this.todos.reload(); // rollback simple : recharger depuis le serveur
    }
  }
}

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)     ⇒ chaînage                (v22)