Navigation from inside modal, then retain tabs and side menu, ionic v3


#1

The problem I am facing is: let’s say I’m using an app that has the same structure as the ionic conference app, with the side menu and tabs at the bottom.

If I try to navigate from within a modal to a different page, the tab footer and navigation get lost, a problem which is sort of hinted at in the ModalController documentation, but for me is too cryptic to decipher how to properly implement so that both the tabs and the navigation back button stay intact.

Is there a similar scenario someone can point to - e.g., code example on github - where the implementation is able to keep the tabs and side menu after navigating from inside a Modal?


#2

I can’t think of a situation where navigating from within a modal makes any sense.


#3

Imagine a scenario where you would start off thinking you will use an alert component.

Because there are so many limitations around the content and format of an alert,
and because the content in your “alert” will be complicated (not the trivial, brief info that usually goes in an alert),
and because the options are so much richer using a modal,
you find you can meet the formatting needs with the modal.


#4

Any scenario involving either an alert or a modal I see the navigation flow being “pop modal, then when done return to exactly where you were before the modal was popped”.


#5

Not always the case.

And again, the issue you are addressing is not addressing my question which I believe is a valid question.


#6

Able to get a working solution after viewing the NavController documentation for navigating from an overlay component:

Navigating from an Overlay Component
What if you wanted to navigate from an overlay component (popover, modal, alert, etc)? In this example, we’ve displayed a popover in our app. From the popover, we’ll get a reference of the root NavController in our app, using the getRootNav() method.

Maybe the ionic team needs to update their documentation, though, because getRootNav is deprecated.
Therefore, I went with the option for getting the root nav here:


#7

@mg1075_ionic I am stumped trying to do something like this. Do you mind posting the code you used to make this work?