Modals

Using Modals

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'));
 }

}