Modal wont open

Ionic Framework ionic-v3
1

Hi I am having problems getting a modal component to work, I know there are some change that could have broken it but the path to the Modal class is correct so it should work?
I am importing my modal page rather than having it in the same file I am calling it from if that makes a difference?

import {Page, Platform, Modal, NavController, NavParams} from 'ionic-framework/ionic';
import {LoginPage} from '../login-page/login-page';

export class HomePage {
	...

	constructor(private platform: Platform,  private nav: NavController, navParams: NavParams) {
		this.nav = nav;
                ...
	}

showModal() {
		let modal = Modal.create(LoginPage);
		this.nav.present(modal)
	}
}
2

Presumably you are calling the showModal function somewhere?

3

Hi, yes with a button on my homePage.html i stuck a console log in the showModal function to be sure it’s getting called too.

4

and if you log a message from the constructor of LoginPage you see nothing?

5

Thats Right nothing coming through, I did have the LoginPage as part of my main navigation but even when taken out it doesn’t work, I’ve also tried importing other pages, do I need to import something in my app.ts?

6

Does your modal template start and end with ion-content ?

7

you don’t actually need the line

this.nav = nav;

and you also have a semi-colon missing from the last line.

Looks like it should work though?

8

Yeah got I have the ion-content tags at start and end, semi-colon didn’t change anything either :confused:

9

Also tried with and without
<ion-navbar *navbar>

10

Do you have an ion-nav element? Also, can you paste the output of ionic info from within the project please?

11

No I have this inside my modal component, I’m using tabs.

<ion-navbar *navbar>
  <ion-title>Login Page</ion-title>
</ion-navbar>

ionic info gives me this

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.18
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.4.1
Xcode version: Xcode 7.2.1 Build version 7C1002

I spun up a new tabs project and tried it in there and it works fine, is it because I’m building on top of the tutorial template?

12

JavaScript

I created a new project based on the tutorial starter:

$ ionic start tutorialModalTest tutorial --v2
$ cd tutorialModalTest/
$ ionic serve

Added the following button to hello-ionic.html:

<p>
  <button secondary (click)="openModal()">Open Modal</button>
</p>

Modified hello-ionic.js to this:

import {Page, NavController, Modal} from 'ionic-angular';
import {ListPage} from '../list/list';


@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
  }

  openModal() {
    let modal = Modal.create(ListPage);
    this.nav.present(modal);
  }

}

Typescript

$ ionic start tutorialModalTestTs tutorial --v2 --ts
$ cd tutorialModalTestTs/
$ ionic serve

Added button to hello-ionic.html:

<p>
  <button secondary (click)="openModal()">Open Modal</button>
</p>

Modified hello-ionic.ts to this:

import {Page, NavController, Modal} from 'ionic-angular';
import {ListPage} from '../list/list';


@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
  constructor(private nav: NavController) {

  }

  openModal() {
    let modal = Modal.create(ListPage);
    this.nav.present(modal);
  }

}

I am seeing a modal for both cases, but here is my ionic info:

Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19

Could you try updating the CLI and then starting a new project and see if my steps above work?

npm install -g ionic@beta

2 Likes
13

Hi still didn’t work, perhaps it was that version of the tutorial kit?, I’ve since changed to a new instance of ionic and it works fine.

14

@brandyshea, thanks for the walk through. It’s exactly what I was looking for!

15

check out the selector atribute of the component you are trying to present. Either none and selector: ‘ion-page’ have solved similar issues I have had before.

16

It’s 2021 and I am having the same issue with ionic 4. I was able to track down the problem to an import. When declaring a certain Component (Clipboard in my case: @ionic-native/clipboard) in the constructor the Modal doesn’t open. No error nothing. I also tried to inject the plugin with Injector, without success. Does someone have an idea what is going on here?

Update: Never mind… The problem was solved after I declared the Component in app.module.ts

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 17 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.2.0

System:

   ios-deploy : 1.11.2
   ios-sim    : 8.0.2
   NodeJS     : v12.18.3 (/usr/local/bin/node)
   npm        : 7.6.3
   OS         : macOS
   Xcode      : Xcode 12.4 Build version 12D4e