httpResource & resource()

About This Feature

httpResource() and resource() replace the subscribe() pattern for data fetching. They expose request state as Signals — no manual subscriptions, no takeUntil, no loading booleans.

• httpResource(requestFn) — wraps HttpClient. Pass a function returning a URL string or request config; it refetches automatically whenever the signals inside the function change. In-flight requests are cancelled (aborted) when the source signal changes.
• resource({ request, loader }) — generic version. The loader is any async function (fetch, WebSocket, IndexedDB, etc.). Angular provides an abortSignal to cancel in-flight work.
• Both expose: .value(), .status(), .isLoading(), .error(), .reload()

Code Example

import { httpResource } from '@angular/common/http';
import { resource, signal } from '@angular/core';

// ── httpResource() ────────────────────────────────────────
// Reactive HTTP — refetches automatically when signals change
selectedUserId = signal(1);

userResource = httpResource<User>(
  () => `/api/users/${this.selectedUserId()}`
);

// Reactive state — no subscribe(), no takeUntil(), no cleanup:
userResource.value()       // User | undefined
userResource.status()      // 'idle' | 'loading' | 'resolved' | 'error'
userResource.isLoading()   // boolean
userResource.error()       // unknown
userResource.reload()      // manually trigger a re-fetch

// ── resource() ───────────────────────────────────────────
// Generic async resource with any loader (fetch, DB, WebSocket...)
commentResource = resource<Comment[], number>({
  params: () => this.postId(),          // reactive signal ← renamed from "request"
  loader: ({ params: id, abortSignal }) =>
    fetch(`/api/comments?postId=${id}`, { signal: abortSignal })
      .then(r => r.json())              // abortSignal cancels on params change
});

// Same reactive API: .value(), .status(), .isLoading(), .reload()

Live Demo — httpResource()

Live Demo — resource() with custom loader