rxResource vs resource in Angular

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())
  });
}

Hire Now!

Need Help with Angular Development ?

Work with our skilled angular developers to accelerate your project and boost its performance.

**Hire now**Hire Now**Hire Now**Hire now**Hire now

Project Inquiry

Career Inquiry

India

A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India

Germany

Rheinsberger Str. 76,10115 Berlin, Germany

USA

611 Gateway Blvd, South San francisco, CA 94080, USA

Company Deck

PDF, 3MB

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

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())
  });
}

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

Need Help with Angular Development ?

Related Q&A

Describe Angular’s Renderer2 and when to use it.

Explain the purpose and usage of InjectionToken in Angular.

Explain Angular Router’s lazy loading and how to implement it.