Multiple Modals in Ionic 2

Ionic Framework ionic-v3
1

I have the following usecase.

  • On homepage there is option to select location.
  • On clicking a modal opens containing the list of states.
  • On selecting a state another modal opens with all the cities in that state.
  • On selecting a city another modal opens with all the localities.

Now on selecting any locality i want to close all the modal popup and transfer that locality value to home page.

I used following approach to transfer the value back

 localities.onDismiss(data => {
   cities.onDismiss(data => {
     state.onDismiss(data => {
        console.log(data);
     })
   })
 });

But in this approach modals are closing one by one and transitions are also taking time. due to which user is also able to see that 3 popups are closing one by one.

Is there any other approach where popups are closed at the same time and value gets transferred back to home page.

3

AFAIK there’s no way to close all modals at the same time. As a workaround you could speed-up the closing of the modal by passing NavOptions to the ViewController.dismiss() method and specifying the duration (or disable the animation altogether). Alternatively you could rethink the app’s design, e.g. you could use selects instead of modals.