Ionic 3 / Ionic 2 Modals -- Words (640)

Ionic 2/3 modals

In this tutorial ,we are going to see how to use modals in Ionic 2 or Ionic 3 apps by creating a simple demo app so lets get started .

First of all,I need to mention that I'm using the Ionic CLI v3 so if you didn't yet upgrade to this release make sure to use the equivalent commands for Ionic CLI prior versions .

You can check this tutorial on how to upgrade to Ionic CLI 3

Generating new Ionic 3 project


Before implementing our modal example ,lets first generate a brand new Ionic project .So go ahead and open your terminal window then type the following :

ionic start ionic-modals blank 

Then navigate inside your project directory and serve your app

cd ionic-modals
ionic serve 

You should be able to visit your app by going to http://localhost:8100

Importing and using ModalController


Open src/pages/home/home.ts then import ModalController from ionic-angular

import { ModalController } from 'ionic-angular';

Next we need to inject via component constructor

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,public modalCtrl : ModalController) {

}

}

Opening a modal page


The next step is to add openModal() method to HomePage component and bind it to a button on home.html

public openModal(){

}    

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

Before adding an implementation for openModal() lets first add a new page to be used by our modal

Head to your terminal inside your project folder and enter

ionic g page ModalPage

Then in home.ts ,use method .create() of ModalController to create a modal and then show it

public openModal(){ var modalPage = this.modalCtrl.create('ModalPage'); modalPage.present(); }

Now if you click on open modal button you should be able to see a modal page popups

Closing modal page


We have added a method for opening a modal ,now lets add a method to close the modal page once it is opened

Open src/pages/modal/modal.ts then add closeModal() method to ModalPage component

public closeModal(){

}

Then open src/pages/modal/modal.html and add a button to close the modal

<ion-header>

<ion-navbar>
    <ion-title>ModalPage</ion-title>
    <ion-buttons end>
    <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
</ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

Now lets implement closeModal() method .

First we need to import ViewController from ionic-angular

import { ViewController } from 'ionic-angular';

Inject ViewController via component constructor

export class ModalPage {

constructor(public viewCtrl : ViewController ) {
}    

Then use .dismiss() method to close the modal

export class ModalPage {

constructor(public navCtrl: NavController, public viewCtrl : ViewController ,public navParams: NavParams) {
}
public closeModal(){
    this.viewCtrl.dismiss();
}

}

Passing data to modal page component


You can also pass some data to a modal page component using the second parameter of create() method ,passed data can be of any type : string , number or object .

So go ahead ,change the openModal() method to pass some data object :

public openModal(){
    var data = { message : 'hello world' };
    var modalPage = this.modalCtrl.create('ModalPage',data);
    modalPage.present();
}

Now lets get the passed parameters using NavParams

@IonicPage()
@Component({
selector: 'page-modal',
templateUrl: 'modal.html',
})
export class ModalPage {

constructor(public navCtrl: NavController, public viewCtrl : ViewController ,public navParams: NavParams) {
}
public closeModal(){
    this.viewCtrl.dismiss();
}
ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
    console.log(this.navParams.get('message'));
}

}    

Conclusion


This is the end of this tutorial ,we have seen how to use modals with Ionic 3 .See you in the next tutorial


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.