Modal
A Modal is a content pane that goes over the user's current page.
Usually it is used for making a choice or editing an item. A modal uses the
NavController
to
present
itself in the root nav stack. It is added to the stack similar to how
NavController.push
works.
When a modal (or any other overlay such as an alert or actionsheet) is
"presented" to a nav controller, the overlay is added to the app's root nav.
After the modal has been presented, from within the component instance The
modal can later be closed or "dismissed" by using the ViewController's
dismiss
method. Additionally, you can dismiss any overlay by using pop
on the root nav controller.
Data can be passed to a new modal through Modal.create()
as the second
argument. The data can gen 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.
Usage
import {Page, Modal, NavController, NavParams} from 'ionic-angular';
@Page(...)
class HomePage {
constructor(nav: NavController) {
this.nav = nav;
}
presentProfileModal() {
let profileModal = Modal.create(Profile, { userId: 8675309 });
this.nav.present(profileModal);
}
}
@Page(...)
class Profile {
constructor(params: NavParams) {
console.log('UserId', params.get('userId'));
}
}
A modal can also emit data, which is useful when it is used to add or edit data. For example, a profile page could slide up in a modal, and on submit, the submit button could pass the updated profile data, then dismiss the modal.
import {Page, Modal, NavController, ViewController} from 'ionic-angular';
@Page(...)
class HomePage {
constructor(nav: NavController) {
this.nav = nav;
}
presentContactModal() {
let contactModal = Modal.create(ContactUs);
this.nav.present(contactModal);
}
presentProfileModal() {
let profileModal = Modal.create(Profile, { userId: 8675309 });
profileModal.onDismiss(data => {
console.log(data);
});
this.nav.present(profileModal);
}
}
@Page(...)
class Profile {
constructor(viewCtrl: ViewController) {
this.viewCtrl = viewCtrl;
}
dismiss() {
let data = { 'foo': 'bar' };
this.viewCtrl.dismiss(data);
}
}
Static Members
create(componentType, data)
Param | Type | Details |
---|---|---|
componentType |
any
|
Modal |
data |
object
|
Modal options |