How to display loading in multiple requests with Ionic 3 and Angular 4

Question

How to display loading in multiple requests with Ionic 3 and Angular 4

Navigation

#1 by (1 votes)

1

How can I display a loading on the screen, during the request time of 2 or more requestses with Ionic 3 and / or Angular 4?

I have tried to make the loading of the two requests, but whenever the fastest request ends, it hides the loading, without the second one being finalized.

ionViewDidLoad() {
  this.getSummary(parametros);
  this.getHeatmap(parametros);
}

getSummary() {
  this.loadingService.showLoader(this.constants.MSG_LOADING);

  this.remedyProvider.getSummaryByDate().subscribe(
    (response) => {
     /// do something
    }, (error) => {
      this.showSummary = false;
      console.log('Backend returned error was: ${error}');
      this.loadingService.hideLoader();
    }, () => {
      console.log('get heatmap complete');
      this.loadingService.hideLoader();
    }););
}

getHeatmap() {
  this.loadingService.showLoader(this.constants.MSG_LOADING);

  this.remedyProvider.getHeatmap().subscribe(
    (response) => {
        //do something      
    }, (error) => {
      console.log('Backend returned error was: ${error}');

    }, () => {
      console.log('get heatmap complete');
      this.loadingService.hideLoader();
    });
}

Code of LoadingProvider (loadginService):

export class LoadingProvider {

  loader: any = null;
  constructor(private _loadingController: LoadingController) {
  }

  private showLoadingHandler(message) {
      if (this.loader == null) {
          this.loader = this._loadingController.create({
              content: message
          });
          this.loader.present();
      } else {
          this.loader.data.content = message;
      }
  }

  private hideLoadingHandler() {
      if (this.loader != null) {
          this.loader.dismiss();
          this.loader = null;
      }
  }

  public showLoader(message) {
      this.showLoadingHandler(message);
  }

  public hideLoader() {
      this.hideLoadingHandler();
  }
}

angular ionic2

asked by anonymous 28.09.2017 / 21:17

1 answer

Event load within event load? Insert ID from one table into another

score 1 · Accepted Answer

I think this is what you need ... For Loading to run while requests are being processed, you can use them as follows:

let lr = this.loadingCtrl.create({
  content: 'Carregando...',
});

lr.present().then(() => {
    //suas requisições aqui.
    //ao final da requisição, use:
    ()=> lr.dismiss()
});