Ionic 4 Modals - handling returned data inside then promise using async/await

Ionic Framework
1

Hi,

When handling data returned from a modal using Ionic 4, if I write the following, this works:

async triggerModal() {
   const r = await this.openModal(params);
   console.log(this.returnedData);
}

async openModal(params)
  {
     const modal = await this.modalCtrl.create({
     component: ModalComponent,
     componentProps: params
   });
   await modal.present();
   await modal.onDidDismiss().then((r) => {
     this.returnedData = r.data; 
   });
}

But if I try it a different way, like this:

async triggerModal() {
   const r = await this.openModal(params);
   console.log(r);
}

async openModal(params)
  {
     const modal = await this.modalCtrl.create({
     component: ModalComponent,
     componentProps: params
   });
   await modal.present();
   await modal.onDidDismiss().then((r) => {
     return r.data 
   });
}

r is ‘undefined’.

I’m just trying to understand the reason for why this might be happening, and whether the second option should work or not.

Thanks

2

even if you say “it works” that seems wrong to me. Either you “subscribe” to the result of your promise with .then or you use async/await but both seems weird to me

so

 const r = await modal.onDidDismiss();
 console.log("the result:", r);

or

modal.onDidDismiss().then((r) => {
    console.log("the result:", r);
});

aka both are actually the same just written differently

3

Hi @milesholt,
I was facing the same issue but doing this way is resolved it.

async presentAlertConfirm() {
const alert = await this.alt.create({
header: ‘Confirm!’,
message: ‘Are you sure to delete ?’,
buttons: [
{
text: ‘Cancel’,
role: ‘cancel’,
cssClass: ‘secondary’,

    }, {
      text: 'Okay',
      
    }
  ]
});

await alert.present();
return await alert.onDidDismiss();

}

async deleteItem(item: Item) {
const Confirm = await this.presentAlertConfirm();
if(Confirm.role ==‘cancel’){
return false;
}
}