First of all, We need to mention that we are using the Ionic CLI 4 so if you didn’t yet upgrade to this release make sure to use the equivalent commands for Ionic CLI prior versions.
Before implementing our modal example, let’s first generate a brand new Ionic 4 project based on Angular.
Go ahead and open your terminal window then type the following command:
ionic start ionic-modals blank --type=angular
Next, navigate inside your project directory and serve your app using the following command:
cd ionic-modals
ionic serve
You should be able to visit your app by going to the http://localhost:8100 address.
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) {
}
}
The next step is to add the openModal()
method to the HomePage
component and bind it to a button on the home.html
file:
public openModal(){
}
<button ion-button (click)="openModal()">Open Modal</button>
Before adding an implementation for the openModal()
method, let’s first add a new page to be used by our modal.
Head to your terminal inside your project folder and run the following command:
ionic g page ModalPage
Then in the home.ts
file, use the create()
method 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.
We have added a method for opening a modal, now let’s add a method to close the modal page once it is opened.
Open the src/pages/modal/modal.tsthen add the
closeModal()method to the
ModalPage` component:
public closeModal(){
}
Then open the src/pages/modal/modal.html file 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 let’s implement the closeModal()
method.
First we need to import ViewController
from the ionic-angular package:
import { ViewController } from 'ionic-angular';
Inject ViewController
via component constructor:
export class ModalPage {
constructor(public viewCtrl : ViewController ) {
}
Next, use the dismiss()
method to close the modal:
export class ModalPage {
constructor(public navCtrl: NavController, public viewCtrl : ViewController ,public navParams: NavParams) {
}
public closeModal(){
this.viewCtrl.dismiss();
}
}
You can also pass some data to a modal page component using the second parameter of the create()
method. Passed data can be of any type: string , number or object.
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 let’s 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'));
}
}
This is the end of this tutorial. We have seen how to use modals in Ionic 4/Angular.
#angular #ionic