Ionic 4 | How to Use Ionic Modal Popovers and Pass Data and Receive Response

In this post, we will discuss How to Use Modal Popups in Ionic’s latest version 4 in few easy steps. These modal popups are similar to pages with the only difference is these are loaded on above of current page.

Also Check: Ionic 3 Modal Popup Tutorial 

In a similar manner, we can pass data to a Modal and also receive back response sent from Modal component. We will discuss these in the example below.

Let’s assume we already have Ionic 4 application with Home Page if not you can create a new Ionic 4 Application using below command. Make sure you have the latest version of Ionic CLI installed

Next, create a new page, which will be shown as Modal

In App’s Main module add Example Modal Page module in imports array

Update Home Page Component and HTML

We will add open modal method with code to open Modal and pass out data to it with dismiss event handler.

Then update Home Page template HTML

home.page.ts

home.page.html

 

Modal Example component

In ModalExample component we will get data sent from Home component and show that data in Modal HTML. We will also have the closeModel method to return data response to Home component dismiss event.

example-modal.page.ts

example-modal.page.html

 

That’s it now you have a working app with Ionic Modal in which we can pass data and also get the response back on Modal dismiss event.

Leave a Reply

avatar
  Subscribe  
Notify of