1

Using Ionic 5's new ModalController, in addition to the backdropDismiss parameter, it is also now possible to set a new parameter which enables the user to swipe a modal down to close it like so:

const modal = await this.modalController.create({
  component: ModalPage,
  backdropDismiss: true, // <-- enable backdrop dismiss
  swipeToClose: true, // <-- enable swipe to close
  presentingElement: await this.modalController.getTop()
});
return await modal.present();

Specific to when a user triggers a swipeToClose or backdropDismiss, Is it possible to pass data back to the onWillDismiss() or onDidDismiss() events?

I am aware of the dismiss() method which allows us to pass data back to the origin component programmatically. That method does not address how to pass data back when the swipeToClose or backdropDismiss events are fired.

It may be the case that this is simply not possible, to which i can come up with a workaround, but thought id propose the question here first.

DevMike
  • 1,630
  • 2
  • 19
  • 33
  • Does this answer your question? [Ionic 4 - Pass Data BACK from Modal](https://stackoverflow.com/questions/52785797/ionic-4-pass-data-back-from-modal) – Najam Us Saqib Mar 16 '20 at 08:20
  • Unfortunately no. That page shows how to pass data back by dismissing the modal programmatically. I am talking about a need for setting data that will be passed automatically to the origin component via the swipeToClose and / or backdropDismiss events. – DevMike Mar 18 '20 at 08:53
  • According to the Documentation `onWillDismiss()` or `onDidDismiss()` events should work with `backdropDismiss` and `swipeToClose` – Najam Us Saqib Mar 18 '20 at 09:56
  • Thanks @NajamUsSaqib yes they do execute, however, what i was looking for was to find out if there was a property i could set in the modal component that would be passed by default to those event methods, however, it does not look like that is possible. – DevMike Mar 19 '20 at 07:17

1 Answers1

1

I today run into the Same Question and found a Solution:

Let's say you have your Page, where you open the Modal:

this.modalController.create({
  component: ModalPage,
  backdropDismiss: true, // <-- enable backdrop dismiss
  swipeToClose: true, // <-- enable swipe to close
  presentingElement: await this.modalController.getTop()
}).then(modal => {
  modal.onWillDismiss().then(data => {
    console.log(data);
  });
  modal.present();
});

And then you have your ModalPage. An Ionic Overlay automatically includes the Overlay into itself, so if just include private modal: HTMLIonModalElement; into the Modal, it will be available and you can do something like this in the OnInit:

this.modal.onWillDismiss().then(data => {
  data.data = 'test';
});

This will be executed before the one from your main Page and you can change the data and role here

EinfachHans
  • 247
  • 3
  • 13