Skip to main content

𝗔𝗻𝗴𝘂𝗹𝗮𝗿 19 signals - 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲, 𝗿𝘅𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲, 𝗵𝘁𝘁𝗽𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲 uses

 Angular 19.0+ introduces three new ways to load data efficiently using signals:

1. resource (Promise-based Loader)

The resource API provides a straightforward approach for fetching and updating data asynchronously using Promises. It is ideal for scenarios where you need a simple data-loading mechanism without reactive programming. Since it is promise-based, it follows a request-response pattern, making it suitable for one-time data fetches.

Example usage:


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

const userResource = resource(async () => {
  const response = await fetch('https://api.example.com/user');
  return response.json();
});

Here, userResource() triggers the function, fetches data from the API, and resolves it using a promise.

2. rxResource (Observable-based Loader)

The rxResource API is designed for Observable-based data fetching, making it ideal for reactive applications where data needs to be streamed or continuously updated. This is especially useful when working with RxJS-based APIs.

Example usage:

import { rxResource } from '@angular/core';
import { of, delay } from 'rxjs';

const timeResource = rxResource(() => {
  return of(new Date()).pipe(delay(1000)); // Emits the current date after 1 second
});

Here, timeResource emits a new value whenever it is invoked, utilizing RxJS Observables to provide more control over data streams.

3. httpResource (HttpClient-based Loader)

The httpResource API builds upon resource, but specifically integrates Angular’s HttpClient for making API calls. This allows it to seamlessly manage HTTP requests while taking advantage of the resource primitive’s optimizations.

Example usage:

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

export class UserService {
  constructor(private http: HttpClient) {}

  userResource = httpResource(() => this.http.get('https://api.example.com/user'));
}

This approach makes it easier to integrate with Angular’s HttpClient while ensuring optimal performance.

Comparison of resource, rxResource, and httpResource APIs

  1. resource (Promise-based Loader)

    • Uses Promises to fetch and update data asynchronously.

    • Suitable for simple, one-time API calls where reactivity is not required.

    • Provides built-in caching and automatic state management.

    • Handles errors using standard try/catch blocks.

  2. rxResource (Observable-based Loader)

    • Uses RxJS Observables, making it ideal for reactive applications.

    • Supports streaming data, allowing updates over time instead of a single response.

    • Provides more control over data updates using RxJS operators like map, filter, etc.

    • Handles errors through RxJS's catchError mechanism.

  3. httpResource (HttpClient-based Loader)

    • Specifically designed for API calls using Angular’s HttpClient.

    • Built on top of resource, meaning it benefits from built-in caching and state management.

    • Allows for direct integration with Angular’s dependency injection system.

    • Uses HttpClient’s error handling mechanisms for managing API failures.

Each API serves a different use case, and choosing the right one depends on the need for reactivity, HTTP integration, or simplicity. 

Labels

Labels: