Getting Started with the httpResource API in Angular

Angular 19 introduced the Resource API for fetching data, and it should not be used for mutation operations, such as POST requests. However, an issue arose when working with the Resource API. One major problem was that it wasn’t built on top of HttpClient, which meant that interceptors did not function as expected.

To address the above problem, Angular 20 introduces the httpResource API.

The httpResource extends the Resource API by using the HttpClient under the hood, providing a seamless way to make HTTP requests while supporting interceptors and existing testing tools.

• httpResource is built on top of the resource primitive.
• It uses HttpClient as its loader.
• It serves as an abstraction for @angular/common/http.
• It makes HTTP requests through Angular’s HTTP stack.
• It works with interceptors.

You can fetch data using the httpResource API as shown below:

export class App {
  constructor() {
    effect(() => {
      console.log('products', this.products.value());
    })
  }
  products = httpResource<IProduct[]>(() => `http://localhost:3000/product`);
}

You can use products to render a table on the template as shown below.

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Price</th>
  </tr>
  @for(p of products.value(); track p.id) {
  <tr>
    <td>{{ p.id }}</td>
    <td>{{ p.name }}</td>
    <td>{{ p.price }}</td>
    <td>{{ p.category }}</td>
    <td>{{ p.description }}</td>
  </tr>
  }

</table>

Read full article here :

https://www.telerik.com/blogs/getting-started-httpresource-api-angular

The httpResource API is one of the most exciting features of Angular V20, and you must use it to fetch data from the backend. It uses the HttpClient as a loader and returns various responses as signal. You should avoid using it for data mutation at the backend.

I hope you find this post helpful. Thanks for reading.