Show/Hide LoadingController while making network calls

Ionic Framework ionic-v3
1

I would like to present LoadingController before making a network calls and dismiss them after the call is complete. I have tried using the below code but am getting the error as

this.loadingProgress : any

constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public loadingCtrl: LoadingController,
    public networkProvider: NetworkProvider) {
      this.loadingProgress = this.loadingCtrl.create({
        content: 'Please wait...'
      });
  }

saveChanges() {
this.networkProvider.updateChanges(function() {
      this.loadingProgress.dismiss();
    },function(){
      this.loadingProgress.dismiss();
    });
}

undefined is not an object (evaluating '_this.loadingProgress'

can anyone help me with this ?

2

Hello You need to use this way
var self = this;

self.loadingProgress = self.loadingCtrl.create({
        content: 'Please wait...'
      });
3

Thanks for Replying, I don’t have any problem with presenting the loader, I have problem with dismissing them. I haven’t used this self so far in angular. Where do you insist me to include that line ? I need to access in the entire component not within the method.

4

Hi, @leorjoseph you need to create present loading function,

// For present loading
	presentLoading() {
		this.loadingProgress = this.loadingCtrl.create({
			content: 'Please wait...'
		});
		this.loadingProgress.present();
	}

Now you have start loading on call this.networkProvider.updateChanges() function like this,

saveChanges() {
	this.presentLoading();
	this.networkProvider.updateChanges()
	.then(res => {
	      this.loadingProgress.dismiss();
	}).catch(err => {
	     this.loadingProgress.dismiss(); 
	});
}

Thanks.

5

Thanks @addwebsolution. This solution seem to work for a normal flow, but it is not working inside success blocks or promises. :cry: