CODEWITHSUNDEEP
angularionic-frameworkionic4
Stephen Romero
Stephen Romero

Reputation: 3022

Component inside of another Component Ionic 4

I am migrating my app over to Ionic 4 from Ionic 3 and I see that async and await calls are being used for each component. I understand why that is being used, but in my Ionic 3 app I have a nested Loading Controller Component inside of an Alert Controller Component.

Ionic 3 .ts

submitAssetLoc(form: NgForm){

    const alert =  this.alertCtrl.create({
       header: 'Submit',
       message: 'Are you sure you want to Submit?',
       buttons: [
         {
           text: 'Yes',
           role: 'Yes',
           handler: () => {
             const loading = this.loadingCtrl.create({
                           message: 'Submitting...'
                          });

          loading.present();

            this.stemAPI.updateGPSLoc(this.testData).subscribe((result) => {

              loading.dismiss();
              
            }, (err) => {
                loading.dismiss();
                let alert = this.alertCtrl.create({

                header: 'Error: Could not submit!',
                message: 'Try submitting again, or submit offline!',
                buttons: [
                  {
                    text: 'Try Submitting Again',
                    role: 'Yes',
                    handler: () => {
                    
                    this.newGPSLoc = [];
                  }
                },
                  {
                    text: 'Submit Offline',
                    handler: () => {
                    
                    this.navCtrl.push(SuccessPage, { 'APIresponse': 'Form submitted offline, please go to support page and re-submit!'});
                    }
                  }
                ]
              });
              alert.present();
            }
         )}
         },
         {
           text: 'No',
           role: 'Cancel',
           handler: () => {

           }
         }
       ]
     });
    alert.present();
  }

My issue is the async,await calls not being properly implemented and I know that my code is obviously not efficient. I assume I need to make methods for each of these, but what would be the best approach to implement this feature correctly?

Upvotes: 0

Views: 762

Answers (1)

anymeshsingh
anymeshsingh

Reputation: 271

Hope this will help

async submitAssetLoc(form: NgForm){

    const alert = await this.alertCtrl.create({
       header: 'Submit',
       message: 'Are you sure you want to Submit?',
       buttons: [
         {
           text: 'Yes',
           role: 'Yes',
           handler: async () => {
             const loading = await this.loadingCtrl.create({
                           message: 'Submitting...'
                          });

          loading.present();

            this.stemAPI.updateGPSLoc(this.testData).subscribe((result) => {

              loading.dismiss();

            }, async (err) => {
                loading.dismiss();
                let alert = await this.alertCtrl.create({

                header: 'Error: Could not submit!',
                message: 'Try submitting again, or submit offline!',
                buttons: [
                  {
                    text: 'Try Submitting Again',
                    role: 'Yes',
                    handler: () => {

                    this.newGPSLoc = [];
                  }
                },
                  {
                    text: 'Submit Offline',
                    handler: () => {

                    this.navCtrl.push(SuccessPage, { 'APIresponse': 'Form submitted offline, please go to support page and re-submit!'});
                    }
                  }
                ]
              });
              alert.present();
            }
         )}
         },
         {
           text: 'No',
           role: 'Cancel',
           handler: () => {

           }
         }
       ]
     });
    alert.present();
  }

Upvotes: 1

Related Questions