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:

I have a modal where I use a component that has a routerLink inside it.

When the user clicks on that item, instead of opening that page (even below the modal) nothing happens. This is somewhat counter intuitive or at least a bit confusing imho.

What do you guys think about that?

Another option would be to change your logic such that when they checkout, they are able to update whatever information you need to ensure is up to date.

I have used IonSlides for wizards in several places in my app and they work great.

Not good things.

Modals take control from the user, so it’s important that they be very narrowly tailored towards achieving one specific, immediate goal, like confirming an action or making a selection from a menu. I can’t think of a situation where having a modal having a routerLink makes any sense.

Thanks. I agree with your assessment.
Any ideas on how you would remodel my use case?
It is a levelup (modal) screen showing my new level and the items I get represented as icons. As a player I want to sometimes immediately see the details about these items.

I used a modal because it makes sense to me to grab the users attention for the levelup notification. However the “want to see more sometimes” is not covered.

Any ideas how to go about this?

If there’s enough room, how about having the concept of “currently selected loot” in the modal (put a border around it or something, and select the first one by default), and an always-present “details” pane below the list of items that displays the description of the currently selected loot icon. Clicking on a given loot icon puts the details for that icon into the details pane.

If there isn’t enough real estate for that, how about doing the same sort of thing but with tooltips? I seem to recall seeing a tooltip module floating out there for use with Ionic, maybe this one?

I recently saw that Apple essentially does this with their COVID-19 tracker setup. A modal comes up to complete a particular action (still inline with @rapropos’s suggestion) but then to keep the UI simple & clean, the user only has to input one thing per screen and there’s a couple normal pages (with back buttons in the modal header). Curious if we can implement something similar.