Ionic 4 – Modal with Passing and Receiving Data Tutorial

 In this tutorial, I’ll show you guys on how to create a modal inside your Ionic project. Modal is a dialog that overlay on top of an existing page. It is used to extend the action within the page and dismiss when the task is completed.

Modal can annoy the user when not implemented correctly. Here are some good reading to get started on modal.

1. Modality, a human interface guideline by Apple.
2. Dialog, guideline provided by Material.io.

This tutorial was divided into 2 sections:

1. Opening and closing a modal
2. Passing data between page and modal

The first section is a basic for open and closing a modal. For the second section, we will show you how to pass the data between modal and parent page.

This tutorial was made with Angular + Ionic CLI v4 and above.

This tutorial use new blank Ionic project as a starter with parent page called home and the modal page called second.

1. Opening and closing a modal

In order to create a modal, we need to generate a new page and name it as second. We also make it easily differentiable from other pages by placing it inside a directory called modals.

Run the following command inside terminal

ionic generate page modals/second

Then, we need to declare our newly created modal page inside the home.module.ts in order to use it. Also, don’t forget to include second as an entryComponents. We found this great article about entryComponents for you guys to check it out.

Add the following changes inside home.module.ts.

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

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

import { FormsModule } from '@angular/forms';

import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

import { SecondPage } from '../modals/second/second.page';

@NgModule({

imports: [

CommonModule,

FormsModule,

IonicModule,

RouterModule.forChild([

{

path: '',

component: HomePage

}

])

],

declarations: [HomePage, SecondPage],

entryComponents: [SecondPage]

})

export class HomePageModule {}

Inside home.page.ts, we are going to create a new function to open the modal called openModal.

Add the following changes inside home.page.ts.

import { Component } from '@angular/core';

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

import { SecondPage } from '../modals/second/second.page';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss']

})

export class HomePage {

constructor(private modalController: ModalController) {}

async openModal() {

const modal = await this.modalController.create({

component: SecondPage

});

return await modal.present();

}

}

Inside home.page.html, create a new button to call function openModal as a click event.

Add the following changes inside home.page.html.

<ion-header>

<ion-toolbar>

<ion-title>

Modal Page Tutorial

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-button (click)="openModal()" color="primary" expand="full">Open Modal</ion-button>

</ion-content>

Right now, we need to work on dismissing the modal. Go to second.page.ts and add a function called closeModal to dismiss a modal.

Add the following changes inside second.page.ts.

import { Component, OnInit, Input } from '@angular/core';

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

@Component({

selector: 'app-second',

templateUrl: './second.page.html',

styleUrls: ['./second.page.scss']

})

export class SecondPage implements OnInit {

constructor(private modalController: ModalController) {}

ngOnInit() {}

async closeModal() {

await this.modalController.dismiss();

}

}

Lastly, we are going to create a button for a user to dismiss the modal.

Add the following changes inside second.page.html.

<ion-header>

<ion-toolbar>

<ion-title>Modal Page</ion-title>

<ion-buttons slot="end">

<ion-button (click)="closeModal()">

<ion-icon slot="icon-only" name="close"></ion-icon>

</ion-button>

</ion-buttons>

</ion-toolbar>

</ion-header>

<ion-content padding>

</ion-content>

And that’s it for opening and closing a modal.

2.Passing data between page and modal

For the second part of this tutorial, we are going to pass the data between parent page and modal back and forth.

First, we are going to create two new public variable called lunch and dinner.

The data from lunch is going to be passed onto the modal.

dinner is going to accept the value passed from the modal.

Add these two variable inside home.page.ts.

public lunch = {

mainCourse: 'steak',

desert: 'pudding'

};

public dinner: string;

Inside the method create, we are going to pass a key value of componentProps with the lunch value that we are going to pass into the modal.

Then, we need to fetch the value of dinner that we get from modal at ionWillDismiss.

Add the following method inside home.page.ts.

async openModalWithData() {

const modal = await this.modalController.create({

component: SecondPage,

componentProps: {

lunch: this.lunch

}

});

modal.onWillDismiss().then(dataReturned => {

// trigger when about to close the modal

this.dinner = dataReturned.data;

console.log('Receive: ', this.dinner);

});

return await modal.present().then(_ => {

// triggered when opening the modal

console.log('Sending: ', this.lunch);

});

}

Inside home.page.html, we are going to open the modal and display the data that are being passed and received.

Add the following changes inside home.page.html.

<ion-header>

<ion-toolbar>

<ion-title>

Modal Page Tutorial

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-text>

<p>Lunch: <strong>{{lunch | json}}</strong></p>

</ion-text>

<ion-text>

<p>Dinner (modal data): <strong>{{dinner | json}}</strong></p>

</ion-text>

<ion-button (click)="openModal()" color="primary" expand="full">Open Modal</ion-button>

<ion-button (click)="openModalWithData()" color="primary" expand="full">Open Modal and Pass Data</ion-button>

</ion-content>

Now, we need to handle input inside the second.page.ts using angular input decorator.

We also need to create a public variable called dinner to pass into the parent page.

Inside closeModal, put dinner as a parameter to pass the value into the parent page.

Add the following changes inside second.page.ts

import { Component, OnInit, Input } from '@angular/core';

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

@Component({

selector: 'app-second',

templateUrl: './second.page.html',

styleUrls: ['./second.page.scss']

})

export class SecondPage implements OnInit {

constructor(private modalController: ModalController) {}

@Input() public lunch: string;

public dinner = {

mainCourse: 'fried chicken',

desert: 'chocolate cake'

};

ngOnInit() {}

async closeModal() {

await this.modalController.dismiss(this.dinner);

}

}

Add the following changes inside second.page.html

<ion-content padding>

<ion-text>

<p>Lunch: <strong>{{lunch | json}}</strong></p>

</ion-text>

<ion-text>

<p>Dinner (modal data): <strong>{{dinner | json}}</strong></p>

</ion-text>

</ion-content>

Result

And here is the result of our hard work.

V