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

[mg1075_ionic]

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?

[rapropos]

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

[mg1075_ionic]

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.

[rapropos]

@mg1075_ionic

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

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”.

[mg1075_ionic]

Not always the case.

Custom modal / alert (with HTML, form...)

Hi ionites! I’m working in a new mobile app with Ionic 2, and I’m trying to get something like this. Basically, what I need is a modal that lets the user see a bit of the page under it in the edges, without occupying 100% of space, similarly to what the alert does. Any ideas on how to get this effect? Thanks in advance! Dani

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

[mg1075_ionic]

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

Ionic Framework

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:

getRootNav() deprecated, use getRootNavById(): what's the value of the root nav id?

You can use this this.app.getRootNavs()[0] because getRootNav() is getRootNav(): any { const rootNavs = this.getRootNavs(); if (rootNavs.length === 0) { return null; } else if (rootNavs.length > 1) { console.warn(’(getRootNav) there are multiple root navs, use getRootNavs instead’); } return rootNavs[0]; } import { App } from ‘ionic-angular’; rootNavCtrl: NavController; constructor( private app: App ) {} this.rootNavCtrl = this.app.getRootNavs()[0]

[JayWilsonJr]

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