Performing multiple HTTP requests in Angular with forkJoin

Use case

There are use cases where you need to make multiple http requests (to same or differerent server) and you need to wait until you get responses from all the http requests for rendering the view.

Solution

‘forkJoin’ is the easiest way, when you need to wait for multiple http requests to be resolved

forkJoin waits for each http request to complete and group’s all the observables returned by each http call into a single observable array and finally return that observable array.

The above example shows making three http calls, but in a similar way you can request as many http calls as required.

As shown in the above code snippet, at the component level you subscribe to single observable array and save the responses separately.

ForkJoin official docs — http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-forkJoin

If you liked this article, please 👏 below, so that other people can find it! :D