Ionic Modal don't return data. How to return data from ionic modals?

Ionic Framework ionic-v3
1

How to return data from ionic 2 modals?

SCENARIO: I need that user select any item of an Array of items (it’s ok, i’m passing this data to list in modal), after select this item, the created modal must be closed and return this selected item.

I’m trying the follow code…

let modal = Modal.create(myModal, {data: […] });
modal.onDismiss(data => {
console.log(‘MODAL DATA’, data); // returns “undefined”
});

this.nav.present(modal);

Thanks! @mhartington

3 Likes
2

What about calling dismiss instead of onDismiss and then return something? Like this:

modal.dismiss( console.log(data) );

Or if you pass it down through the viewCtrl something like this:
this.viewCtrl.dismiss(console.log(data) );

3

Thanks @luukschoen, i’ll try this way.

4

I think the API docs aren’t fully up-to-date. Use the syntax from the component docs, pretty sure it’ll work. I suggest that the API docs are extended with dismiss and onDismiss, or maybe give a hint to whether what’s the difference between the two. It’s not entirely clear now.

5

You need to add a handler for modal’s onDismiss() and then return the data from the modal itself by passing the data to the ViewController’s dismiss() method:

// myPage.ts
// Passing data to the modal:
let modal = Modal.create(myModal, { data: [...] });

// Getting data from the modal:
modal.onDismiss(data => {
    console.log('MODAL DATA', data);
});

this.nav.present(modal);

// myModal.ts
constructor(inputData: NavParams, private view: ViewController) {
    // Getting data from the page:
    var dataFromPage = inputData.get('data');
}

dismiss() {
    // Returning data from the modal:
    this.view.dismiss(
        // Whatever should be returned, e.g.:
        // { ... }
    );
}
18 Likes
6

@iignatov Perfect! it works!.. Thanks man. @luukschoen thank for your collaboration. This topic may can be useful to others members. :slight_smile:

7

How did you make it work? Would you be able to post your sample code?

8

@Deep0802 Check out the sample code in my answer above - basically you have to add a onDismiss-handler for the modal (to get the data) and return the data from the modal itself by using the ViewController’s dismiss() method (you pass the data as a parameter to the method).

9

I was able to figure that out from your code. Thanks for reply!:slight_smile:

10

Looks like Modal.OnDismiss is Modal.OnDidDismiss now.

7 Likes
11

what about if user didn’t use my dismiss function ? for example he clicked hardware back button in android devices or he used backdrop to dismiss the modal ?

simply i want to send data to outside whatever the reason that caused to dismiss the modal

4 Likes
12

Currently looking for a solution for this also. On larger screens it is possible to click/press on the backdrop, which dismisses the modal, but I’m not aware of the method that I can hook into to append some return data.

13

Can’t you just save whatever data you want to save in local storage while inside ionViewWillLeave() ? The you can collect the information from local storage whenever you want.

14

Could do yeah, but that’s a bit of a convoluted work around for something that seems 99% of the way there. Just want a simple way to intevene in the dismiss process to add some data. Currently looking at using ionViewWillLeave, to add some data within that hook.

15

actually i decided send the data from the modal with custom event in ngOnDestroy and listen to that event outside because with any way that the modal dismissed the ngOnDestroy called

so the code will be like this, in the modal class:

 ngOnDestroy() {
    events.publish(
      'modalDidDismissedEvent',
      {
        // any data 
      }
    );
 }

and outside the modal should be like this:

let didDismissObservable = events.subscribe('modalDidDismissedEvent', (data) => {
  console.log(data);
  didDismissObservable.unsubscribe();
});

hope that help someone

1 Like
16

Hi
In modal I kept like below

this.presentToast("Data Updated...");            
 setTimeout(function(){
this.viewCtrl.dismiss(editData);
              },2000);

but its not working in timeout displaying error dismiss to undefined but without timeout its working

17

tis is Working

openModal(characterNum) {

let modal = this.modalCtrl.create(ModalContentPage, characterNum);
modal.present();
modal.onDidDismiss(data => {  //on dismiss get data 
  console.log('MODAL DATA', data); 
  this.hotellocation=data.id; //return data

});

}

refer https://ionicframework.com/docs/api/components/modal/ModalController/

18 
addToCart(list) {
    let modal = this.modalCtrl.create(AddToCartPage, {
      'merchant_id': this.merchantId,
      'item_id': list
    });
    modal.onDidDismiss(data => {
      console.log('MODAL DATA', data);
    });
   modal.present();

im unable to open the modal :frowning:
i want to fetch this data from modal

this.viewCtrl.dismiss({
      Size: this.selectedSize,
      Spicy: this.selectedSpicy,
      TotalPrice: this.totalPrice()
    });

What am i doing wrong? Please help

19

P E R F E C T …

Ionic:
Ionic CLI : 5.2.3 (C:\Users\49583\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.7.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available

Utility:
cordova-res : not installed
native-run : 0.2.7

System:
NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.10.1
OS : Windows 10

20

hi. any solution found?