In this Ionic 4 tutorial, we are going to learn how to use modal popover in an Ionic 4 Angular application. We will also learn how to pass data and receive the data response in Ionic 4 modals.
Table of Contents
To create Modals in Ionic 4, you must have the latest versions of Node js, Ionic and Cordova installed on our machine.
To get started with Node js you need to download the latest version of Node from here.
sudo npm install -g cordova ionic
To update the Ionic and Cordova to the latest version, use the following command:
sudo npm update -g cordova ionic
Please make sure you must have Xcode set up on your machine. We are using Visual Studio Code in this tutorial; however, you can use any text editor of your choice.
Now we are all set to create a brand new Ionic project, follow the next step.
To build modals in an Ionic 4 app we need to generate basic Ionic/Angular project from scratch. Run the below command to create a brand new Ionic 4/Angular project.
ionic start ionic-modals-app --type=angular
Let’s pick the perfect starter template! 💪
Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this prompt next time, supply template, the second argument to ionic start.
? Starter template:
tabs | A starting project with a simple tabbed interface
sidemenu | A starting project with a side menu with navigation in the content area
❯ blank | A blank starter project
my-first-app | An example application that builds a camera with gallery
conference | A kitchen-sink application that shows off all Ionic has to offer
Let’s head over to the ionic modals app’s project directory.
cd ionic-modals-app
Now, run the Ionic 4 app using the below commands.
ionic serve
ng run app:serve --host=localhost --port=8100
Now, your project will open on http://localhost:8100/home URL, you can view your Ionic/Angular project in the browser’s address bar.
Let’s pass data to modal in Ionic 4 using modalController.create() method. To initiate the modal popover in Ionic add the following code inside the src/app/home/home.page.ts
file.
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPopupPage } from '../modal-popup/modal-popup.page';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public modalController: ModalController) { }
async showModal() {
const modal = await this.modalController.create({
component: ModalPopupPage,
componentProps: {
'name': 'Hello User'
}
});
return await modal.present();
}
}
Import the ModalController from ‘@ionic/angular’, this module helps in calling the regular pages in Ionic 4. Then, Inject ModalController in the constructor. Use the .create() method to pass the data to the modal popover in the showModal() function.
In this step, we will create a regular modal popup page in the Ionic 4/Angular project. Enter the below command in your terminal.
ng generate page ModalPopup
Import ModalPopup page in app.module.ts
and inject inside the declarations and entryComponents array.
import { ModalPopupPage } from './modal-popup/modal-popup.page';
@NgModule({
declarations: [ModalPopupPage],
entryComponents: [ModalPopupPage],
imports: [...],
providers: [...],
bootstrap: [...]
})
export class AppModule { }
To get the data in Ionic 4, we need to import the NavParams in the ModalPopupPage and inject it inside the constructor(), use navParams.get()
method to receive the data response in the browser’s console.
Go to src/app/modal-popup.page.ts and add the following code in it.
import { Component, Input } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
selector: 'app-modal-popup',
templateUrl: './modal-popup.page.html',
styleUrls: ['./modal-popup.page.scss'],
})
export class ModalPopupPage {
@Input() name: string;
constructor(
public navParams: NavParams
) {
console.log(navParams.get('name'));
}
}
To terminate the modal, import and inject ModalController
and define the closeModal() method and bind it to ion-button HTML tag.
Final src/app/modal-popup/modal-popup.page.ts
file.
import { Component, Input } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
@Component({
selector: 'app-modal-popup',
templateUrl: './modal-popup.page.html',
styleUrls: ['./modal-popup.page.scss'],
})
export class ModalPopupPage {
@Input() name: string;
constructor(
public navParams: NavParams,
public modalCtrl: ModalController
) {
console.log(navParams.get('name'));
}
public closeModal() {
this.modalCtrl.dismiss({
'dismissed': true
});
}
}
Call the closeModal() method in HTML template.
<ion-button ion-button (click)="closeModal()">Close</ion-button>
Here, is the full HTML code for Ionic modal template. Add the code inside the modal-popup.page.html
file.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button ion-button (click)="closeModal()">Close</ion-button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
To show the model we need to add the click event and pass the showmodal()
function in it. Head over to home.page.html
template and add the following code inside of it.
<ion-button color="primary" (click)="showModal()">Show Modal</ion-button>
Finally, we have completed the Ionic 4/Angular Modals tutorial. In this tutorial, we learned how to send data to the modal component page vice versa receive data responses on the modal page. Get the complete source code of this tutorial on my Git repo.
#Ionic #Angular