Angular Resource API (v.19 experimental)

17 snippets

39 mins

v.19.x

Fabio Biondi

Google Expert | Angular

# Resource API

Angular 19 introduces a new resource API:

it easily allows to handle asynchronous operations using Promises and native fetch API or observable with HttpClient
it manages state, as the isLoading() is the property through which we can understand if an asynchronous operation is still running
it depends on a signal that automatically re-fetches data when its value changes

Resource API is currently in the experimental phase and may be subject to changes

# Loading data when component is mounted

In the following example we create userResource using the new resource API provided by Angular core.

When the component is mounted, it will be responsible for invoking an endpoint.
We use the native fetch API to make the http request and cast the result to a Promise of Users.
The result of the operation will be available through the value signal provided by resource and shown in the template.
It also provides the isLoading property to know whether the operation is still running or not.

src/app.component.ts

the JSON pipe

object | json is an angular pipe that is applied to an object. and

Pipes are often used to format data and Angular provides different types of pipes for formatting dates, numbers, strings and so on.

The json pipe is often used to convert objects (and array) into strings that would otherwise not be visible in the template.

One more stuff: when we use pipes we also have to import and declare them in the imports property of the @Component.

# Typing Result

In the previous snippet we typed the result of fetch call using casting:

We can use the resource generics parameter instead:

The first parameter is used to type the returned value of the Promise
The second parameter can be used to type the request parameters (but we will use it in the next examples, so since there are no parameters we can just type it as void)

src/app.component.ts

# async await

Since resource API supports Promises we can also use async-await:

src/app.component.ts

# reload()

resource API also offers a convenient reload method to re-fetch:

Open the Network browser dev tools to see how it works. Furthermore the isLoading property becomes true again when data are fetched, and returns false value when the operation is completed

src/app.component.ts

# Depend on Signals

We can also set up the endpoint to be called automatically based on a signal value

In the following example we specify that the request is linked to the value of the signal userId. When the signal is updated, data is automatically re-fetched.

Since the url is composed by (API/[user id]), the endpoint will loads a different user at each API call

src/app.component.ts

The request type

In the previous snippet we typed the request parameter, that is userId, using the second generic parameter:

As you can see now the request parameter is typed as number:

# Abort Signal

New

Membership Plan, italian only!

Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!

Topics

Courses

Bookmarks

there are no topics

Home•Courses•Login•Register

Send your feedback

Angular Resource API (v.19 experimental)

17 snippets

39 mins

v.19.x

Fabio Biondi

Google Expert | Angular

# Resource API

Angular 19 introduces a new resource API:

it easily allows to handle asynchronous operations using Promises and native fetch API or observable with HttpClient
it manages state, as the isLoading() is the property through which we can understand if an asynchronous operation is still running
it depends on a signal that automatically re-fetches data when its value changes

Resource API is currently in the experimental phase and may be subject to changes

# Loading data when component is mounted

In the following example we create userResource using the new resource API provided by Angular core.

When the component is mounted, it will be responsible for invoking an endpoint.
We use the native fetch API to make the http request and cast the result to a Promise of Users.
The result of the operation will be available through the value signal provided by resource and shown in the template.
It also provides the isLoading property to know whether the operation is still running or not.

src/app.component.ts

the JSON pipe

object | json is an angular pipe that is applied to an object. and

Pipes are often used to format data and Angular provides different types of pipes for formatting dates, numbers, strings and so on.

The json pipe is often used to convert objects (and array) into strings that would otherwise not be visible in the template.

One more stuff: when we use pipes we also have to import and declare them in the imports property of the @Component.

# Typing Result

In the previous snippet we typed the result of fetch call using casting:

We can use the resource generics parameter instead:

The first parameter is used to type the returned value of the Promise
The second parameter can be used to type the request parameters (but we will use it in the next examples, so since there are no parameters we can just type it as void)

src/app.component.ts

# async await

Since resource API supports Promises we can also use async-await:

src/app.component.ts

# reload()

resource API also offers a convenient reload method to re-fetch:

Open the Network browser dev tools to see how it works. Furthermore the isLoading property becomes true again when data are fetched, and returns false value when the operation is completed

src/app.component.ts

# Depend on Signals

We can also set up the endpoint to be called automatically based on a signal value

In the following example we specify that the request is linked to the value of the signal userId. When the signal is updated, data is automatically re-fetched.

Since the url is composed by (API/[user id]), the endpoint will loads a different user at each API call

src/app.component.ts

The request type

In the previous snippet we typed the request parameter, that is userId, using the second generic parameter:

As you can see now the request parameter is typed as number:

# Abort Signal

New

Membership Plan, italian only!

Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!

Angular Cookbook

Send your feedback

Angular Cookbook

# Resource API

# Loading data when component is mounted

# Typing Result

# async await

# reload()

# Depend on Signals

# Abort Signal

Send your feedback

# Resource API

# Loading data when component is mounted

# Typing Result

# async await

# reload()

# Depend on Signals

# Abort Signal

# rxResource

# Parallels Http requests with rxResource and forkJoin

# rxResource, forkJoin, @for blocks & @let syntax