Sfdwhf

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 loading indicator false. then loading indicator disppears. But other apis are still working I want to show loading indicator until the five api calls response. can you please give me some idea to do the task.

code:

component.ts

  loading = true;

  ngInit() {



  this.api1();

  this.api2();

  this.api3();

  this.api4();

  this.api5();



  }



  api1(){

  this.loading=true;

  this.apiService.api1.subscribe(response => {

  loading = false;

  }, error=>{



  });

  }

  api2(){

  this.loading=true;

  this.apiService.api2.subscribe(response => {

  loading = false;

  }, error=>{



  });



  }

  api3(){

  this.loading=true;

  this.apiService.api3.subscribe(response => {

  loading = false;

  }, error=>{



  });

  }

  api4() {

  this.loading=true;

  this.apiService.api4.subscribe(response => {

  loading = false;

  }, error=>{



  });

  }

api5() {

  this.loading=true;

  this.apiService.api5.subscribe(response => {

  loading = false;

  }, error=>{



  });

  }

ApiService.service.ts:

     api1(): any {



      return this.http.get('apiurl');



    }

    api2(): any {



      return this.http.get('apiurl');



    }

    api3(): any {



      return this.http.get('apiurl');



    }

    api4(): any {



      return this.http.get('apiurl');



    }



    api5(): any {



      return this.http.get('apiurl');



    }

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]);



}

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"

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>