Compare Angular's rxResource() and resource() APIs for reactive data fetching in zoneless apps?

March 18, 2026

No strings attached, just valuable insights for your project

rxResource() converts RxJS Observables to signal triples (value/loading/error) with auto-cancellation via AbortSignal, ideal for HttpClient streams with operators like retry/retryWhen. resource() handles Promises/async functions directly, simpler for fetch() or one-shot APIs without RxJS overhead. Both support refetchOn signals and caching; rxResource shines for complex streams, resource() for minimal deps choose based on your async primitive. Reduces manual switchMap+spinner boilerplate by 80% in v20+.

Code Example:-

Code

import { rxResource, resource } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';

@Component({
  template: `
    @if (users(); as u) {
      @for (user of u.data; track user.id) { {{user.name}} }
    } @else if (u?.loading()) { <spinner/> }
  `
})
export class DataDemo {
  private http = inject(HttpClient);
  page = signal(1);

  // rxResource: RxJS streams with operators
  users = rxResource({
    request: this.page,
    loader: ({request: page}) => this.http.get(`/api/users?page=${page}`).pipe(
      retry({count: 3, delay: 500})
    )
  });

  // resource: Promise/fetch direct
  profile = resource({
    params: () => ({id: this.userId()}),
    loader: ({params}) => fetch(`/api/profile/${params.id}`).then(r => r.json())
  });
}

Previous Next

Hire Now!