Modals in Ionic 2

Modals are an easy way to present options to the user or allow editing of certain settings. In Ionic, modals are just regular pages that get called with a ModalController. They appear on top of the page stack, but they don’t get a back button. When a modal gets dismissed it’s completely destroyed.

The following is a quick breakdown of how you would implement a modal in Ionic and how to go about passing data between a page and a modal and vice versa.

The Modal Page

First you need to create a regular page for the modal. Here the page will be called SampleModalPage. You can create the page with the Ionic CLI with this command:

$ ionic g page SampleModal

Now import the new page in the app module and in the page from which the modal will be called. Also add it to the declarations and entryComponents of the app module. Here’s an example of what your app module should look like:

App Module: app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SampleModalPage } from '../pages/sample-modal/sample-modal';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SampleModalPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SampleModalPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Calling The Modal

In the template for the page that calls the modal, we’ll just add a button like this:

<button ion-button block (click)="openModal()">Open Modal</button>

Now in the class definition for the page, we import and inject ModalController and define the openModal method that gets called when we click on the button:

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { SampleModalPage } from '../sample-modal/sample-modal';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public modalCtrl: ModalController) { }

  openModal() {
    let myModal = this.modalCtrl.create(SampleModalPage);
    myModal.present();
  }
}

We call present on our modal to show the modal.

Dismissing The Modal

To be able to dismiss the modal, you import and inject ViewController and call dismiss on the ViewController instance. Let’s say for example that our modal page has a close button like this:

sample-modal.html

<button ion-button block (click)="closeModal()">Close Modal</button>

Here’s how to implement the closeModal method in the modal’s page class definition:

sample-modal.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-sample-modal',
  templateUrl: 'sample-modal.html'
})
export class SampleModalPage {
  constructor(public viewCtrl: ViewController) {}

  closeModal() {
    this.viewCtrl.dismiss();
  }
}

Passing Data

Now that we have a simple modal working, it would be nice to actually do something interesting like passing data from the page that call the modal to the modal or back from the modal to the page that called it.

Data from the calling page to the modal

Simply change the openModal method to something like this that passes a second argument to the create function with a data object:

home.ts

openModal() {
  let obj = {userId: '1', name: 'Bob', email: 'bob@unicorn.com'};
  let myModal = this.modalCtrl.create(SampleModalPage, obj);
  myModal.present();
}

Now in the modal page, get that data using NavParams. First import and inject NavParams and then use the get method on NavParams to get the data you need:

sample-modal.ts

import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-sample-modal',
  templateUrl: 'sample-modal.html'
})
export class SampleModalPage {
  email: string = this.navParams.get('email');

  constructor(public navParams: NavParams, public viewCtrl: ViewController) {}

  // ...
}

Data from the modal back to the calling page

Let’s say the user provided details in a form on the modal page, you’ll want an easy way to pass that data back to the page that called the modal.

First, add your data as an argument to the ViewController’s dismiss method:

sample-modal.ts

closeModal() {
  this.viewCtrl.dismiss(userProvidedData);
}

And then all that’s left to do is to setup an onDidDismiss handler on the modal object on the page that called it:

home.ts

userName: string;

openModal() {
  let myModal = this.modalCtrl.create(SampleModalPage);

  myModal.onDidDismiss(data => {
    this.userName = data.userName;
  });

  myModal.present();
}

Search

🔎 Searching...