`resource()`

Manages async data loading reactively, exposing value, status, and error signals.

Since Angular 19+ Spec ↗

Syntax

resource<T, R>({ request, loader }): ResourceRef<T>

Parameters

Name	Type	Required	Description
`request`	`function`	No	Reactive function producing the loader input; re-runs the loader on change.
`loader`	`function`	No	Async function that fetches data for the current request.

Returns

ResourceRef<T> — Object with value(), status(), error(), isLoading(), and reload().

Examples

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

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>{{ user.value()?.name }}</p>`,
})
export class UserComponent {
  id = signal(1);
  user = resource({
    request: () => ({ id: this.id() }),
    loader: async ({ request }) =>
      (await fetch(`/api/users/${request.id}`)).json(),
  });
}

Notes

resource ties async loading to signals: when the request changes the loader re-runs and in-flight requests are aborted via the provided AbortSignal. Inspect status() (idle, loading, resolved, error) for UI states. Use rxResource for an Observable-based loader. Experimental API; shape may evolve.