How to have a modal in Ionic 4 with different pages inside of it?

I have a modal page created for the checkout. However, I want to have more pages inside of it . For example, if there is a button to change the address it would open another page where the user can select or change his address and come back to the modal and continue his checkout process without dismissing it (ASOS app checkout for example). Is there any way to do it? Because I tried using “routerLink” and unfortunately it didn’t work out. Thank you in advance!

what you can do is you can call multiple modal inside the first modal u called. just dont call the dismiss() fucntion for the first modal so that it stays in background and when u done changing ur data on 2nd modal u can close it and the first modal will be their in background. u can also even pass data using navparams inside it.

I would strongly suggest rethinking this.

The definition of a modal is “something that must be completely resolved immediately before any further interaction with the app can occur”, and implicit in there is that there can only be one of those at a time. Nested modals (to me at least) represent a UI design flaw.

I agree that it’s a flaw if you have multiple modals calling each other like the previous commenter suggested, but what about the ASOS app using such functionality for the basket, it looks so nice. However, they might be just hiding the tabs and it’s not even a nested modal. I will try to rethink it. I was just wondering if there was a way of doing it easily.

I have never heard of ASOS and am not motivated to research or install it, sorry. The first question I would consider in your situation is “does this checkout process really need to be modal in the first place?”. If, as you’re describing, the user editing delivery addresses or payment methods or whatnot can be freely done throughout the process, I would argue that tells us that it shouldn’t be modal, and I would consider making it an ordinary page or set of pages, which has the added benefit of designing away your problem altogether.

1 Like

You are right, eventually I just went for the ordinary page, i just hid the bottom tabs and disabled the swipe back function. It made my life much easier. :+1: