CODEWITHSUNDEEP
ionic-framework
deepak murthy
deepak murthy

Reputation: 411

Ionic 3 show loading symbol on http request

I am learning Ionic,so once the Signup button is clicked, How to show loading symbol and hide it after getting the reponse in ionic 3 ?

sign.html

<button ion-button color="danger" block outline (click)="signup()">Signup</button>

signup.ts 

signup() {
    this.authServiceProvider.postData(this.userData, "signup").then((result) => {
    this.responseData = result;
    console.log(this.responseData);
    if( (JSON.stringify(this.responseData._body)) != "" ) {
        this.navCtrl.setRoot(HomePage);
    } else {
        console.log("User already exists");
    }
    }, (err) => {
        //connection failed error message
        console.log("something went wrong");
    });
}

Upvotes: 1

Views: 819

Answers (1)

Abdul Qayyum
Abdul Qayyum

Reputation: 1052

First of all, you need to import loading controller.

import { LoadingController } from 'ionic-angular';

in the constructor, you need to create an object of it. as

constructor(public loadingCtrl: LoadingController){}

Now before calling the service in signup method, you need to activate loading message and after the result, dismiss it.

signup() {
 let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });
    loading.present();
    this.authServiceProvider.postData(this.userData, "signup").then((result) => {
    this.responseData = result;
    console.log(this.responseData);
    if( (JSON.stringify(this.responseData._body)) != "" ) {
     loading.dismiss();        
     this.navCtrl.setRoot(HomePage);
    } else {
        loading.dismiss();
        console.log("User already exists");
    }
    }, (err) => {
        //connection failed error message
        console.log("something went wrong");
    });
}

Upvotes: 2

Related Questions