I am trying to understand what the differences between these two ways of obtaining data and which should I be implementing on my Angular component.

Scenario:

I have a Angular form that depends on data being loaded in before the page can be rendered. This would include dropdown data for select fields. This would require multiple API calls to different services to be complete. The API's do not have a dependency on each other so they could be async.

Solution 1: Using Angular resolve https://angular.io/api/router/Resolve

We have used this to handle API calls in the past. But only for 1 call not multiple. Works as it should but requires some wiring up in the module.

Solution 2: using RXJS ForkJoin

This seems to be the most easy to implement. It seems to listen out for multiple API calls in a form of a collection.

Different implementations to achieve a similar result. Which one would be the best solution and why? I have tried Googling and asking around but no luck.

thanks...

CodePudding user response：

Go for second option because, the screen will remain blank until the resolver completes all the calls which is bad for UX, also forkJoin will be completed relatively quickly, since all the calls will be made parallelly.

Optionally you can show a spinner over the form until the forkJoin completes, but when using a resolver you don't have this option!

CodePudding user response：

You say the data needs to be loaded before the rendering. The RXJS zip operator might be what you need.

https://www.learnrxjs.io/learn-rxjs/operators/combination/zip

Once all data is retrieved the observable will emit an array with the data from the various endpoints you mentioned. Then you can render the form.

Using a loader/spinner during the loading would be kind for your users of course.