title: Angular waiting bar for all async operation in ngOnInit
body: <p>I would like to add a waiting bar line <a href="https://www.npmjs.com/package/ngx-spinner#demo" rel="nofollow noreferrer">this</a> to make user to wait until all the necessary data are retrieved.<br>
  The problem is that I have several HTTP call so I don't know if exist a simple way to catch the end of all these request (I thought about a counter that I increment for each end of call at only when all the methods end I have to hide the waiting bar).<br>
  Since this is a common problem, there is a simple way to make this?<br>
  For example this is a component code:</p>
  
  <pre><code>ngOnInit() {
     this.spinner.show();
     call1();
     call2();
     call3();
     .....
     callN();
  
     //At the end of all method
     this.spinner.hide();
  }
  
  call1() {
      this.service.getAtti().subscribe((apiResult: ApiResult&lt;a[]&gt;) =&gt; {   
        this.a = apiResult.Data;
      }
      );
    }
  
    call2() {
      this.service.getDestinatari().subscribe((apiResult: ApiResult&lt;b[]&gt;) =&gt; {
        this.b =  apiResult.Data;
      }
      );
    }
  
    call3() {
      this.service.getRichiedenti().subscribe((apiResult: ApiResult&lt;c[]&gt;) =&gt; {
        this.c =  apiResult.Data;
      }
      );
    }
  
    callN() {
      this.service.getMessi().subscribe((apiResult: ApiResult&lt;d[]&gt;) =&gt; {
        this.d = apiResult.Data;
      }
      );
    }
  </code></pre>