Angular’s httpResource: Reactive Data Fetching with Signals

Angular v19.2 introduced httpResource, a new experimental API poised to redefine how we handle HTTP data retrieval. By integrating directly…

paul-chesa.medium.com

Build A Full-Stack Application With AnalogJS

You’ve probably heard the Vue crowd singing praises about Nuxt, and the React folks wouldn’t dare...

dev.to

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025

My role at Google was eliminated.

nerdy.dev

Seamless data fetching with httpResource

Fantastic new APIs are coming to Angular. Two years ago, we proposed making Angular a reactive web framework powered by signals. Since…

blog.angular.dev

Seamless data fetching with httpResource

Photo by Jamie Street on Unsplash Fantastic new APIs are coming to Angular. Two years ago, we proposed making Angular a reactive web framework powered by signals. Since then, the team has shipped a number of signal-based features in the framework: reactive primitives like signal & computed, reactive inputs including model, signal queries, bidirectional RxJS conversion utilities, and migration tooling. We have a solid foundation for reactivity in Angular. Now, we’re ready to begin the next phase of the reactivity journey: the world of asynchronous state. In v19 we shipped the experimental resource() API for developers to try out in advance of the dedicated RFC. The resource API makes it possible to expose results of asynchronous operations as signals. For most applications, developers make HTTP requests for the data their applications need. We recognize this and have built a new API to help facilitate this primary use case — introducing httpResource 🎉.HttpResource httpResource is built on top of the resource primitive and uses HttpClient as loader. It acts as a frontend for @angular/common/http. It makes HTTP requests through the Angular HTTP stack, including interceptors. As the underlying stack remains the same, testing will rely on the same tools. Here we are defining an httpResource with currentUserId as a reactive parameter.currentUserId = getCurrentUserId(); // returns a signal user = httpResource(() => `/api/user/${currentUserId()}`); // A reactive function as argument By default, an httpResource will perform a GET request and return an unknown typed JSON response. It is important to note that httpResource differs from the HttpClient as it initiates the request eagerly (unlike the HttpClient Observable-based requests which must be subscribed). Like resource, it configures a reactive request. If any of the source signals in the request computation change, a new HTTP request will be made. For more advanced requests, it is possible to define a request object similar to HttpClient‘s request.user = httpResource(() => ({ url: '/api/user/${currentUserId()', method: 'GET', headers: { 'X-Special': 'true', }, params: { 'fast': 'yes', }, reportProgress: true, withCredentials: true, transferCache: true, })); While the resource pattern is meant only for retrieving asynchronous data, httpResource will allow any request method (like POST in the previous example). This still doesn’t mean that you should be using httpResource to change data on the server. For instance, if you need to submit form data, use the HttpClient methods. An httpResource will return and parse the response as JSON but it is possible to use it for other return types. The API has multiple dedicated methods available for other response types:httpResource.text(() => ({ … })); // returns a text in value() httpResource.blob(() => ({ … })); // returns a Blob object in value() httpResource.arrayBuffer(() => ({ … })); // returns an ArrayBuffer in value()Shape of an HttpResource An httpResource , similar to other `resource`, exposes several signals:value() — which contains the result of the http request (when successful) and is programmatically overwritablestatus() — with the status of the resource (idle, loading, error etc)error() — with the request error / parsing errorisLoading() — which is true while the request is pending It also includes dedicated signals for metadata about the response:​​headers() — with the response’s headersstatusCode() — with the response’s status codeprogress() — with the progress of the request (if required in the request object) These new signals streamline the writing of requests by exposing this useful information without requiring a specific argument like for the HttpClient to request the HttpResponse.Embracing the Ecosystem for Type Safety When performing http requests we often want to ensure that the data we receive conforms the shape that we expect. This is commonly known as schema validation. In the JavaScript ecosystem we often reach out for battle-tested libraries like Zod or Valibot for schema validation. The httpResource offers direct integration for those libraries by using the parse parameter. The returned type of this parse function will provide the type to the resource itself, ensuring type safety alongside the schema validation. The following example uses Zod to parse and validate the response from the StarWars API. The resource is then typed the same as the output type of the Zod’s parsing.export class AppComponent { id = signal(1); swPersonResource = httpResource( () => `https://swapi.dev/api/people/${this.id()}`, { parse: starWarsPersonSchema.parse } ); } const starWarsPersonSchema = z.object({ name: z.string(), height: z.number({ coerce: true }), edited: z.string().datetime(), films: z.array(z.string()), }); Demo on StackblitzExperimental API The httpResource is available as a part of the Angular v19.2 release. This is an experimental API and is not ready for production because the shape of this API can still change before it is promoted to stable. With that in mind, we would love for you to try out the API and let us know what you think. You can learn more about this API, resource and more in the RFC on GitHub. Thank you for being a part of the Angular community and we look forward to continuing the reactivity journey together. Happy coding! Seamless data fetching with httpResource was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

blog.angular.dev

a man in a sombrero is playing a trumpet while another man plays a violin

ALT: a man in a sombrero is playing a trumpet while another man plays a violin

media.tenor.com

a group of transformers are standing in front of a building with the words autobots roll out

ALT: a group of transformers are standing in front of a building with the words autobots roll out

media.tenor.com

RxSignals: The most powerful synergy in the history of Angular

Let’s explore why Signals allow us to move state management out of RxJS, letting it focus primarily on event-driven tasks.

medium.com

Deprecation of real-time GitHub Actions workflow job events in Slack and Microsoft Teams apps · GitHub Changelog

Deprecation of real-time GitHub Actions workflow job events in Slack and Microsoft Teams apps

search.app

Angular: The Documentary [OFFICIAL TRAILER]

YouTube video by Honeypot

youtube.com