DEV Community

Analyze ways to retrieve data with signals and HttpClient in Angular

Connie Leung on February 15, 2024

Introduction In this blog post, I would like to discuss how signal and HttpClient can retrieve data in Angular. In my observation, I fo...
Read full post
Collapse
 
jangelodev profile image
João Angelo •

Hi Connie Leung,
Your tips are very useful
Thanks for sharing

Collapse
 
railsstudent profile image
Connie Leung •

Thank you so much

Collapse
 
siva678 profile image
Sivasankaran •

Very simple and clear explanation. Thanks @railsstudent 🙏

Collapse
 
railsstudent profile image
Connie Leung •

Thank you so much for your support

Collapse
 
rainerhahnekamp profile image
Rainer Hahnekamp •

Good overview, well done!

Connie, what do you say about not using HttpClient at all but a fetch with async/await and adding some features around that?

Collapse
 
railsstudent profile image
Connie Leung •

I will continue to use HttpClient.get because there are some use cases that RxJS is good at.

  1. I can pipe the Observable to switchMap to cancel the previous unfinished request and begin a new one.
  2. I can pipe the Observable to retry operator to retry the requests a specific number of times before emitting an error.
  3. When I want to receive the results of multiple HTTP requests before proceeding to the next step, I prefer forkJoin operator over Promise.all that is the Promise equivalence.

RxJS also has lastValueFrom to convert Observable to Promise. For Angular developers who want to deal with Promises, they can check out firstValueFrom and lastValueFrom in the RxJS Doc.

By the way, I love your ng news updates and youtube. It helps me keep up-to-date to the latest Angular news and Ngrx Signal Store

Collapse
 
nirhu profile image
Martin Uhrin •

Thanks, great article. I noticed that in the first case (Signal + HttpClient + AsyncPipe) the pokemon does not update on changing pokemonId, others do.
So what do you think about wrapping it in computed like this?
pokemon$ = computed(() => this.getPokemon(this.pokemonId()));
and of course
@if (pokemon$() | async; as pokemon) {
<app-pokemon [pokemon]="pokemon" />
}
Thanks :)

Collapse
 
railsstudent profile image
Connie Leung •

I will use toSignal to convert pokemon$ to Signal and display the signal in the HTML template.
Then, we either use @if/async or @let syntax to pass the pokemon to the component to render.