Loader sync with multiple API requests

We all have a problem with loader when it comes to multiple API calls at the same time.

How can we show the continuous loader till all the API calls are completed?

Come... Lets c the solution...

Easy way…

Step 1: Create a new service for Loader start and stop as shown

Loader.service.ts file content

Step 2: Create an interceptor ( hope u know how to else visit https://angular.io/api/common/http/HttpInterceptor) and have the count of API calls active at the moment.

Logic: Trigger the loader when API calls happen and count the number of requests. When an API call is completed decrement the count. So at any point in time count will be the number of active API calls. And stop the loader sign when the count becomes zero.

api-interceptor.service.ts

Step 3: Create a separate component for loader and add it to the main component’s HTML (either app.component.html or feature module’s main component HTML)

app.component.html

Step 4: Subscribe to the ‘loader$’ observable created at loader service to loader component’s OnInit.

loader.component.ts

Step 5: Use the property ‘isLoading’ in the HTML to display and hide the loader sign.

loader.component.html

Step 6: Test your implementation and shout ‘Eureka Eureka’…

For suggestions and contact:

email: starone.nirmal@gmail.com