[Ionic v4] WHY cannot navigate (push) inside modal?!

Ionic Framework
1

I worked on some project with ionic v3 before and I have no problem with navigation inside modal anymore.

Now I am working on another project that use ionic v4 and I spent 2-3 days to find how to navigate inside modal. But seem like I cannot do that on ionic v4.

So I would like to know Why we cannot do that on ionic v4 ?

I am also working on iOS native application and navigation inside modal is also standard transition in iOS native application.

I am wondering why you cut this feature out, even if iOS native still have it.

Thank you.

2

Hi

dearboy

I followed your steps and I got the positive result inside modal class you have to use router for your navigation inside modal class,

cheers!!

3

Hello, navCtrl.push won’t work for modal, but if you wish to open or go to the modal page. Follow these steps.

Create a new page ModalPage: ionic g page modal

then open homePage.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {

  }

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage
    });
    return await modal.present();
  }
}

in html

<ion-button (click)="presentModal()"></ion-button>

Import your ModalPageMobude in App.module.ts

import { ModalPageModule } from './modal/modal.module';

:::
 imports: [BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    ModalPageModule
  ],
:::

After this opne you modal page

import { Component, Input } from '@angular/core';
import { NavParams } from '@ionic/angular';

@Component({
  selector: 'modal-page',
})
export class ModalPage {

  constructor() {

  }

dismiss() {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}

In modal page html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Modal Page
   </ion-title>
   <ion-icon name="close" (click)="dismiss()"></ion-icon>
  </ion-toolbar>
</ion-header>

Now your modal is done, Create a modal and navigate like this.

4

Hello @gokujy Thank you for the example.

My problem is after I create and show a modal like your example. I also have another modal for example Modal2.

I want to navigate from first modal to Modal2 by navigation push (by not dismiss a first modal and show modal 2 ), which I can do in ionic v3

Thank you

5

put this code in your modal1

async presentModal() {
    const modal = await this.modalController.create({
      component: Modal2Page
    });
    return await modal.present();
  }

and then your modal2 module inport in app module

6

In this case, It gonna be showing modal over modal right ?

Maybe this is only one way to deal with that in ionic v4 :relieved:

7

Finally I found the way to solve the problem. By using

<ion-nav [root]="targetPage"></ion-nav>

I just wrap targetPage into ion-nav as a root. And present it as modal.

On the targetPage I can do push inside the modal by the following code. And a route url is not changed while I do push as I want to do.

const nav = document.querySelector('ion-nav');
nav.push(AnotherDetailPage);
2 Likes
8

@dearboy tried to use your solution, but the page is not called by modal. Could you explain more or show the source code of how I can do this? thanks in advance!

9

@danielantoniobs2 sorry for delay.

First I created modal-base.component like this to wrap some page that I want to show as modal by setting a root page.

modal-base.component.html

<ion-nav [root]="rootPage"></ion-nav>

modal-base.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-modal-base',
  templateUrl: './modal-base.component.html'
})
export class ModalBaseComponent implements OnInit {
  rootPage: any;
  constructor() {}
}

Assume I have a List.page.ts which contain a list of some data that I want to show as modal.
And In a Home.page.ts I show the list page as modal by presenting ModalBaseComponent and pass ListPage as rootPage parameter to the component.

import { ModalController } from '@ionic/angular';
import { ModalBaseComponent } from '../components/modal-base/modal-base.component';
import { ListPage } from '../Pages/List/list.page';

export class AppComponent {
  async presentModal(modalType: ModalType) {
    const modal = await this.modalCtrl.create({
      component: ModalBaseComponent,
      componentProps: {
        rootPage: ListPage
      }
    });
    return await modal.present();
   }
}

On List.page.ts when a user tap on a list we can navigate push transition by query ion-nav
and call push function like the following code.

import { ListDetailPage } from '../ListDetail/list-detail.page';

export class ListPage {
  moveToDetail(id: string) {
    const nav = document.querySelector('ion-nav');
    nav.push(ListDetailPage, { id });
  }
}
2 Likes
10

Hi!
I have been struggling with push in modal too and after I figured out how to do it I made this example projekt:

Check it out, it’s a s really small and straight forward example :slight_smile:

1 Like
11

@wmjoers
Thank you for sharing the project. It is easy to understand. :grinning:

1 Like
12

Thanks @dearboy and @wmjoers :smiley:

1 Like
13

@dearboy, @wmjoers Thanks for sharing your solution(s). :slight_smile:
That is already a step up in terms of making it possible.

Sadly it does not fully solve my issue of using existing components in my modal that have routerLinks in them.
Any thoughts on that?

1 Like
14