Navigate from modal to a page in Ionic 2

Ionic Framework ionic-v3
1

I have an ionic tabs project and I’m trying to navigate from a modal to a page but I cannot get the tabs to show up after navigation.

I displayed a search modal with this code
const rideModal = this.modalCtrl.create(MainSearch,
{
itemName: this.item,
setFocus: focus
});

A search modal is displayed where users can search for items and while the modal is still open I then use this.nav.push(itemPage) to navigate to a new page for the selected item. My problem here is that after navigation to a new page from the modal, tabs do not show up on the bottom of the page. It looks like the new page is stacked on top of the modal page.

Is it possible to navigate to a new page and make the tabs show up and also keep the nav history with a back button to the modal?

I have search online for hours without a solution that doesn’t look hacky. I will appreciate if there is a clean way to do this. Thanks

1 Like
2

That’s not an intended use of a modal. Why don’t you just turn the modal into a page?

3

I agree with @AaronSterling especially that you shouldn’t try to keep history within a modal. It sounds like you are building something similar to a shopping cart UI, so you might consider keeping track of items in a popover, but the main interactive view would still be a regular page in the stack, not a modal.

That said, I have encountered a similar problem where I am trying to present a modal view for user registration and sign-in, and then re-render the view in the stack below, depending on changes in user state.

Under certain circumstances, I have seen the multiple stacked views problem you describe and I think it comes from a coding error where you may have inadvertently created multiple nav’s. In my case, I get around this by giving the modal some method and then calling it back from another class using NavParams.

  openModal(page) {
    let nav = this.nav;
    const rideModal = this.modalCtrl.create(MainSearch, {
      itemName: this.item,
      setFocus: focus,
      sayHello: function() {
        console.log('hello');
        nav.setRoot(PageBelowTheModal);
      }
    });
    modal.present();
  }

The callback from your modal.ts would include something like this:

    this.navParams.get('sayHello')();

I hope this is helpful. I am still trying to solve my issue.

2 Likes