Modal wont open


#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


#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.