How to dismiss all modals including its parent modal?

Ionic Framework Ionic Vue
1

I have a modal that is opened within another modal , I want when the user click submit on second modal all modals get dismissed and router.push to the main page of my app. but I can’t find a way to close the parent modal behind my “submit page” modal programatically.

2

when submit on the second modal is called it should dismiss to the first modal. You can catch the didDismiss from the second modal on the first modal, then call firstModal.dismiss()

secondModal.onDidDismiss().then(dataReturned) ={
firstModal.dismiss();
}

that will get you to the root component where the first modal was triggered

3

but my second modal is in another component (im using inline modal), so how can I access firstModal from there? I tired to use modalController but that didn’t work.

4

On base component

 const firstModal = await this.modalController.create({
      component: firstModalComponent
    });

    firstModal .onDidDismiss().then((dataReturned) => {
}

FirstModalComponent

const secondModal = await this.modalController.create({
      component: secondModalComponent
    });

    secondModal .onDidDismiss().then((dataReturned) => {
    this.modalController.dismiss();
}

and your secondModalComponent would be where the submit happens

1 Like
5

Thanks, it works but I was mostly looking for the version of doing this with “Inline modals”

6

have the second modal fire an event that the first modal is listening for…