Ionic 4 - Pass Data BACK from Modal

Some days ago I had the same problem and here's my solution:

I guess, you already have a component which contains the actual modal. name UserModalComponent

Your UserModalComponent should get the ModalController injected:

constructor(private modalController: ModalController){}

Next step is to pass the selected user back:

selectUser(user: User):void {
  this.modalController.dismiss(user);
}

In your component in which you want to call the modal and get the user back, you also have to inject the ModalController as above and additionally, you need this method:

 async openUserModal() {
    const modal = await this.modalCtrl.create({
      component: UserModalComponent,
      componentProps: { users: this.users },
    });

    modal.onDidDismiss()
      .then((data) => {
        const user = data['data']; // Here's your selected user!
    });

    return await modal.present();
  }

I hope this helps! If anything is unclear, just ask!


This is how you get data back from modal in Ionic 4 :

contactsModal.onDidDismiss().then(data => {
    console.log('data came back from modal');
    console.log(data);
})