Posts

Showing posts from February, 2023

Angular 15: Calling the REST API with RxJS CombineLatest

Image
This article is an extension of my previous article . In the previous article, we have seen how to make parallel HTTP calls with RxJS forkJoin() method. In this article, we will use the combineLatest() operator of the RXJS. We use the combineLatest() operator when we need to call multiple APIs and combine them for some processing before returning the result. The best use of this operator is when you have multiple, long-lived observables that rely on each other for some calculation or determination. The use case is that the Angular application wants to access product information of different categories from various REST APIs but the Angular Application wants to show all products of received categories on UI by combining them. Figure 1 explains the use case. Figure 1: Using the combineLatest The combineLatest() operator accepts Observables by accessing REST APIs, and then further allows us to add the code to process these observables as per our requirements in the Angular client applicat

Angular 15: Performing Parallel HTTP Calls to REST APIs using RxJs 7.8

Image
In this article, we will see the mechanism for accessing external REST APIs by making parallel calls using RxJs.  Angular, being the great framework for building complex front-end apps, various times we need to make HTTP calls to REST APIs to fetch data to show on UI. Of course, Angular provides HttpClientModule and HttpClient classes to manage asynchronous HTTP calls. The HttpClient provides get(), post(), put(), and delete() methods to perform HTTP operations and all these methods return an Observable object.  Objeservable is the most basic building block provided in RxJs. An Observable represents a set of values received over any time, this means that when the HTTP call returns data from REST API it is immediately delivered to UI so that the UI can be updated.  There is one more use case that must be considered which makes parallel HTTP calls to REST APIs to fetch data. Here, the challenge is how to collect these multiple observables at a time and pass them to UI? Figure 1 shows the