Ionic 2 - Get data back from modal

Question

I have a component which is my main interface. Inside this component, clicking a button opens ionic 2 modal which allows to choose items.

My modal page (itemsPage):

..list of items here

    <button ion-button [disabled]="!MY_TURN || !selectedItem || !selectedItem.quantity"
       (click)="useItem(selectedItem)">
        <span>Choose item {{selectedItem?.name}}</span>
      </button>

useItem() should:

Send item data to my main interface component
Close the modal
Execute a method in my main interface

How I can perform such actions? Couldn't find any documentation about communicating between modal and component in Ionic 2.

Sending data from modal to component is not support in ionic 2. I use some hidden part in my page instead. — amin arghavani, Jan 07 '17 at 13:52

score 53 · Accepted Answer · edited Apr 05 '18 at 11:20

53

It is simply a matter of using parameters in viewController.

In your main interface component,

let chooseModal = this.modalCtrl.create(itemsPage);
  chooseModal.onDidDismiss(data => {
     console.log(data);
});
chooseModal.present();

In your modal page,

useItem(item) {   
  this.viewCtrl.dismiss(item);
}

Modal Controller link here

edited Apr 05 '18 at 11:20

johnny 5

19,893
50
121
195

answered Jan 07 '17 at 12:28

Suraj Rao

29,388
11
94
103

`ViewController` was removed in v4, use `ModalController` for dismissing instead. – Clint Jan 08 '20 at 17:21

score 4 · Answer 2 · answered Apr 23 '18 at 14:47

This is a clear example of getting data from modals in ionic. 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);

on the modal page

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

dismiss() {
// Returning data from the modal:
  this.viewCtrl.dismiss(
      // Whatever should be returned, e.g. a variable name:
      // { name : this.name } 
  );
}

it says "onDismiss" is not a function – Fay007 Nov 22 '19 at 16:34 — Fay007, Nov 22 '19 at 16:34

Ionic 2 - Get data back from modal

2 Answers2

Linked