Creating a separate navigation stack for navigation inside a modal?

Ionic Framework ionic-v3
1

Hello everyone, I’m working on an Ionic 2 App (RC4) and I’m running into an issue that looks like a common use case to me, but I’m not managing to figure out how to get it to work.

Let me first explain my current setup and intended result. I have a home component with a list of items that has a NavController, to navigate between the full list and the details page for each list item. This works marvellous.

In the ion-navbar of my home component I have a button that opens a modal with a form component (used to add new items to the list).

Now I’d like to instantiate a new NavController inside my modal, that allows me to navigate between components within the modal (and as such divide my form in separate pieces).

The problem is that whenever I push a new component (for example form2 page) on the navController that is defined inside the page that was opened in the modal, it pushes the page on the main stack. Instead I’d like to start with a new stack inside the modal-context and push the page only onto that stack.

I’ve looked around and found topics that touch on the subject, but nothing that comes really close to what I’m after.

So first of: is it actually possible to maintain multiple navControllers / nav stacks within and Ionic2 app? And secondly: how can I select the proper stack before pushing a new page onto it?

Thanks!

Michiel

2 Likes
2

I’ve run into the samme issue. It seems like something Ionic should support quite easily, but it’s not obvious how to implement it.

3

@michiel27 Did you get this working?

4

Anyone have any resolution ?

5

someone got a solution?

6

Hi,

Do you get the solution?

7

For me it works fine as long as you don’t open more than one modal. As soon as you open the second modal, the modals and pages navigated to from within that modal are pushed to a shared nav controller for the modals.

Here is the example:

And here the code:

home.ts

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <p>{{ getViews() | json }}</p>
      <button ion-button (click)="openModal()">Open new Modal</button>
      <button ion-button (click)="openHome()">Open new Home Page</button>
    </ion-content>
  `
})
export class HomePage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
    navCtrl.getViews().map(v => v.name)
  }

  openModal() {
    this.modalCtrl.create(ModalPage).present();
  }

  openHome() {
    this.navCtrl.push(HomePage);
  }

  getViews() {
    return this.navCtrl.getViews().map(v => v.name);
  }
}

modal.ts

@Component({
  selector: 'page-modal',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Modal</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <p>{{ getViews() | json }}</p>
      <button ion-button (click)="openHome()">Open new Home Page</button>
      <button ion-button (click)="openModal()">Open new Modal</button>
      <button ion-button (click)="close()">Close Modal</button>
    </ion-content>
  `,
})
export class ModalPage {

  constructor(public navCtrl: NavController, public viewCtrl: ViewController, public modalCtrl: ModalController) {

  }

  openHome() {
    this.navCtrl.push(HomePage)
  }

  openModal() {
    this.modalCtrl.create(ModalPage).present();
  }

  getViews() {
    return this.navCtrl.getViews().map(v => v.name);
  }

  close() {
    this.viewCtrl.dismiss();
  }
}