How To Show Loading Indicator On Page Loading In Angular 7 Until All Apis Response?

I have 5 api calls in a page. some apis take 20 sec to give response. some take 30 sec to give response. some take 10 sec so, when first api gives its response, first api sets load

Solution 1:

You can use rxjs forkjoin for the same. Forkjoin waits for all the request is complete and return the response when all the api call complete. Here is the example.

**component.ts**

isLoading: boolean;
constructor(private apiCallService: ApiSErvice) {}
ngOnInit() {
   this.isLoading = true;
   this.apiCallService.multipleApiCallFunction().subscribe(response  => {
       this.isLoading = false;
})
}


**ApiService.service.ts**

import { Observable, forkJoin } from 'rxjs';

multipleApiCallFunction() : Observable<any[]>{
 const api1 = this.http.get('apiurl-1');
 const api2 = this.http.get('apiurl-2');
 const api3 = this.http.get('apiurl-3');
 const api4 = this.http.get('apiurl-4');

  return forkJoin([api1, api2, api3, api4]);

}

Solution 2:

Another way to achieve this if you don't want to use forkJoin or want to control each one individually, you can create a Subscription variable for each API call, and then in your HTML use an *ngIf="sub1 || sub2 || ... || sub5" to display and hide the loading indicator, it will be something like this:

//declare subscriptions like so
sub1: Subscription; 

ngInit() {
  sub1 = this.api1();
  sub2 = this.api2();
  sub3 = this.api3();
  sub4 = this.api4();
  sub5 = this.api5();
}

in your HTML loading bar tag add:

*ngIf="sub1 || sub2 || sub3 || sub4 || sub5"

Solution 3:

You can simply use a variable(s) to store API results then load the content based on it's existance:

<div *ngIf = "apiResults; else elseBlock">
    ...
</div><ng-template #elseBlock>Loading...</ng-template>

Solution 4:

It seems this question is not active now. However I add the solution here to show spinner if anyone needs in future.

You can use this angular package to show spinner( loader ) whenever you call the api. It's very much helpful to show the spinner on initial load. You can also use regex's, methods and headers to filter the api's.

https://www.npmjs.com/package/ng-http-loader