A modal is nothing but a page, which can be opened inside a page without destroying the page level data. Modals can be useful in many places. Say, for example, if you want to show the filter option for a search, then Modal is the best-suited one. If you open the filter option on another page, the search page result(page level data) will be deleted. So the best option for showing filter's is modal.

Ionic 4 offers built-in modal component. In this tutorial, you will learn, how to utilize the Ionic 4 modal component from scratch. I personally feel the  Ionic 4 lacks documentation when compared to its previous versions.

The prime aim of this tutorial is, to explain
1. How to create a modal in Ionic 4.
2. How to close the modal in Ionic 4.
3. How to pass data to a modal in Ionic 4.
4. How to receive data from a page to modal in Ionic 4
5. How to send data from modal to page in Ionic 4
6. How to receive data from modal once the modal is closed in Ionic 4.

These are the goal of this tutorial. So we are going to see each topic one by one.

Preview of Modal Example.


 

1. How to create a modal

 

Creating a modal is very simple. Modal is nothing but a page. So you can generate a page using the below command. 

ionic g page view-player
ionic g page edit-player

You have to execute the above code on the terminal or command prompt inside the root of the Ionic 4 project.

In this example, I am using the IPL(Indian Premier League 2019) CSK Team information.

Once you created the pages, then you must put an entry of these modal pages to app.module.ts file. 

Open app.module.ts file and import the modal pages using the below code.

import {ViewPlayerPageModule} from './view-player/view-player.module';
import {EditPlayerPageModule} from './edit-player/edit-player.module';

Put an entry of the imported modal page module to the imports of the app.module.ts file.

imports:[ViewPlayerPageModule,EditPlayerPageModule]

If you skip the above-mentioned step, then your program will throw an error. 

Now go to home.page.ts file and import ModalController class, which is used for opening , closing and passing data to the modal page.

import { ModalController } from '@ionic/angular';

Create an object reference using the constructor in the home.page.ts file.

constructor(public modalController: ModalController) { }

Create the IPL 2019 player data array object, which contains players information.

playersList:any[]=[{
  name:'MS Dhoni',
image:'https://iplstatic.s3.amazonaws.com/players/284/1.png',
role:"Wicketkeeper batsman",
  batting_style:"Right-handed",
  bowling_style:"Right-arm medium",
  nationality:"Indian",
  matches:183,
  runs:4246,
  fifties:22,
  fours:287,
  sixes:196
 },
 {
  name:'Kedar Jadhav',
image:'https://iplstatic.s3.amazonaws.com/players/284/297.png',
role:"Batsman",
 batting_style:"Right-handed",
 bowling_style:"Right-arm off-spin",
 nationality:"Indian",
 matches:73,
 runs:1052,
 fifties:4,
 fours:90,
 sixes:37
},
{
 name:'Dwayne Bravo',
image:'https://iplstatic.s3.amazonaws.com/players/284/25.png',
role:"All-rounder",
batting_style:"Right-handed",
bowling_style:"Right-arm medium fast",
nationality:"West Indian",
matches:126,
runs:1442,
fifties:5,
fours:114,
sixes:60
}]

Now call the create() function of modalController and pass the view player page as a component, in order to open the page as modal.

const modal = await this.modalController.create({
component: ViewPlayerPage});

Call the present function to display the modal. 

modal.present();

If you are not calling the present() function, then it won't open the modal page.

The full code to open the view player modal page is given below.

async openModal() {
 const modal = await this.modalController.create({
  component: ViewPlayerPage
 });
 return await modal.present();
}

The async and await commands are used to call the lines one by one.

Create a button and call the openModal() function using the click event in the home.page.html file.

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

 

2. How to close the modal in Ionic 4.

 

From the previous section, we created a modal and opened the modal using the modal controller. Now we have to close the opened modal page. You need again modal controller class to close the modal page.

Now import the modal controller class in the view-player.page.ts file

import { ModalController } from '@ionic/angular';

Create an object reference using the constructor.

constructor(public viewCtrl: ModalController) { }

Call the dismiss() function from the modal controller object reference to close the modal page

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

 

3. How to pass data to a modal in Ionic 4.

 

If you want to pass the data to a modal page, then you must use the componentProps property of the modal controller.

async openModal(player) {
 const modal = await this.modalController.create({
  component: ViewPlayerPage,
  componentProps: { player: player }
 });
 return await modal.present();
}


Put the above code in the home.page.ts file and it will pass the player information to the view-player modal page. In the view-player modal page, you can capture the data.

Paste the below code in the home.page.html file, in order to call the openModal(player) function.

<ion-list>
   <ion-list-header color="tertiary">
    <ion-label>CSK SQUAD</ion-label>
   </ion-list-header>
    <ion-item *ngFor="let x of playersList;let i=index" >
      <ion-avatar (click)="openModal(x)">
       <img [src]="x.image">
      </ion-avatar>
      <ion-label (click)="openModal(x)">
       <h3>{{x.name}}</h3>
       <p>{{x.role}}</p>
      </ion-label>
      <ion-icon name="eye" color="success" (click)="openModal(x,i)" slot="end"></ion-icon>
      <ion-icon name="create" color="danger" slot="end" (click)="editModal(x,i)"></ion-icon>
     </ion-item>
   </ion-list>

The above displays the player's name and role in the team. And when you click the eye icon, it will call the openModal(player) function and pass the corresponding player data to the view-player modal page.

The editModal(x,i) is used to edit and update the player information like view player modal page.

 

4. How to receive data from a page to modal in Ionic 4

 

If you want to receive data in the modal page, then you must use the NavParams class.

import { NavParams } from '@ionic/angular';

Create the object reference for the NavParams class using the constructor in the view-player.page.ts file.

constructor(navParams: NavParams){}

The nav params class had get() method to receive the data. 

player:any

constructor(navParams: NavParams,public viewCtrl: ModalController) {

this.player=navParams.get('player')

}

Create a player variable. And catch the player information using the nav params class and assign it to the player variable. 

 

5. How to send data from modal to page in Ionic 4

 

If you want to send the data from modal page to parent page, then you can use the dismiss() function to pass the data.

dismiss() {
  this.viewCtrl.dismiss({age:25});
 }

The above code will send the age with 25 value to the parent page. You can pass an object, array of the object or any value to the dismiss() function.

 

6. How to receive data from modal once the modal is closed in Ionic 4.

 

You can receive the data from modal page to parent page using the below code.

 modal.onDidDismiss().then(data=>{
  console.log(data)
 })

The onDidDismiss() function on the modal controller class is used to receive the data from the model page, once the modal page is closed.

That's all guys. Hope this will be useful for you. 

Get the full code using

https://github.com/bharathirajatut/ionic4/tree/master/modal-example-with-ipl-data

If you found the article is useful, then give us a star in the git repo using the above-mentioned link.

The codes are tested with Ionic 4 framework. And it works fine.