Navigate Within Modal

Ionic Framework ionic-v3
1

I’m currently trying to implement the following:

image
MultiPageModal.png1325×485 21.8 KB
… so, create a modal with a page in it, then navigate to a second page within the modal.

When I try pushing a second page to the First Pages NavController, I actually get:

image
MultiPageModal--actual.png1325×485 20.2 KB
.

Is what I’m attempting possible?

➜  ionic-candidate git:(master) ✗ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.1.2 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.8.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13
    npm        : 4.2.0
2

Can you show me the code that you use to push the second page?
This should be the same kind of code like when you create a normal modal.

3

Hey Matt. Thanks for replying…I sorted this by adding a Nav component in the end.

I tried adding a page using similar modal creation code, but that created an additional modal (so no ‘back’ button in the navbar) which is not quite what I was after.

Thanks again.

Mart

4

  1. You could make your own back button in the header of the modal.
    It’s not a real one, but it’s only function would be to dismiss itself

  2. Do you mind sharing your code here? Other people will probably encounter the same use case and sample code would be awesome for them

1 Like