catch dismiss event in modal controller from main component

Question

In my MainPage, I call the function create in ModalController, the ModalPage is shown and when I click on cancel, it calls dismiss function and return to MainPage. Everything works fine.

@Component({
  selector: 'main-page',
  templateUrl: 'main-page.html'
})
export class MainPage{
   itemTapped($event, item) {
       let detModal = this.modalCtrl.create(ModalPage, {item : item});
       detModal.present();
   }
}


@Component({
  selector: 'modal-page',
  templateUrl: 'modal-page.html'
})
export class ModalPage{
   dismiss() {
     this.viewCtrl.dismiss();
   }
}

Now, I want to call a function in MainPage after the ModalPage has been dismissed. Is there any method ?

Answer 1

You can use onDidDismiss (docs) like this:

export class MainPage{
   itemTapped($event, item) {
       let detModal = this.modalCtrl.create(ModalPage, {item : item});

       detModal.onDidDismiss(() => {
         // This will be executed after the modal is dismissed...
         console.log('Hi...');
       });

       detModal.present();
   }
}