I have multiple API calls on a page, each with different response times. When the first API call finishes and sets the loading indicator to false, I want to keep the indicator active until all five API calls have responded. Can you provide any suggestions on how to achieve this?
Here is the code snippet:
component.ts
loading = true;
ngInit() {
this.api1();
this.api2();
this.api3();
this.api4();
this.api5();
}
api1(){
this.loading=true;
this.apiService.api1.subscribe(response => {
this.loading = false;
}, error=>{
});
}
api2(){
this.loading=true;
this.apiService.api2.subscribe(response => {
this.loading = false;
}, error=>{
});
}
api3(){
this.loading=true;
this.apiService.api3.subscribe(response => {
this.loading = false;
}, error=>{
});
}
api4() {
this.loading=true;
this.apiService.api4.subscribe(response => {
this.loading = false;
}, error=>{
});
}
api5() {
this.loading=true;
this.apiService.api5.subscribe(response => {
this.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');
}