Example
Modals slide in off screen to display a temporary UI, often used for login or signup pages, message composition, and option selection.
import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';
export class MyPage {
constructor(public modalCtrl: ModalController) {
}
presentModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
}
NOTE: A Modal is a content pane that goes over the user's current page.
Passing data through a Modal
Data can be passed to a new modal through Modal.create() as the second argument. The data can then be accessed from the opened page by injecting NavParams. Note that the page, which opened as a modal, has no special "modal" logic within it, but uses NavParams no differently than a standard page.
First Page:
import { ModalController, NavParams } from 'ionic-angular';
export class HomePage {
constructor(public modalCtrl: ModalController) {
}
presentProfileModal() {
let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
profileModal.present();
}
}
Second Page:
import { NavParams } from 'ionic-angular';
export class Profile {
constructor(params: NavParams) {
console.log('UserId', params.get('userId'));
}
}
