title: how to show loading indicator on page loading in angular 7 until all apis response?
body: <p>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.</p>
  
  <p>code:</p>
  
  <p>component.ts</p>
  
  <pre><code>  loading = true;
    ngInit() {
  
    this.api1();
    this.api2();
    this.api3();
    this.api4();
    this.api5();
  
    }
  
    api1(){
    this.loading=true;
    this.apiService.api1.subscribe(response =&gt; {
    loading = false;
    }, error=&gt;{
  
    });
    }
    api2(){
    this.loading=true;
    this.apiService.api2.subscribe(response =&gt; {
    loading = false;
    }, error=&gt;{
  
    });
  
    }
    api3(){
    this.loading=true;
    this.apiService.api3.subscribe(response =&gt; {
    loading = false;
    }, error=&gt;{
  
    });
    }
    api4() {
    this.loading=true;
    this.apiService.api4.subscribe(response =&gt; {
    loading = false;
    }, error=&gt;{
  
    });
    }
  api5() {
    this.loading=true;
    this.apiService.api5.subscribe(response =&gt; {
    loading = false;
    }, error=&gt;{
  
    });
    }
  </code></pre>
  
  <p>ApiService.service.ts:</p>
  
  <pre><code>     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');
  
      }
  </code></pre>