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


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.


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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

6 Comment threads
6 Thread replies
Most reacted comment
Hottest comment thread
7 Comment authors
shubhamFirmoMatthew HarrisprincepatelHaPham Recent comment authors
newest oldest most voted
Notify of

ionic v4 doesn’t have navParams, so this tutorial will NOT work.


why it’s not working for my app. I did same you.
Error: StaticInjectorError(AppModule)[ModalScanPage -> NavParams]:
StaticInjectorError(Platform: core)[ModalScanPage -> NavParams]:
NullInjectorError: No provider for NavParams!

Matthew Harris
Matthew Harris

Theory question: I’m still learning but I thought async await was the better replacement for method.then() style coding.

In the update you have an async method but then drop back to using modal.onDidDismiss().then() style for the onDidDismiss event handler.

Is there a technical reason for this? Or was this perhaps just copied in from some docs somewhere or something like that?

Matthew Harris
Matthew Harris

You have got these two lines switched around, they are trying to assign to each others params (id to title, title to id):

ngOnInit() {
this.modelId =;
this.modalTitle =;


Its possible pass an html or an content to modal?


please give demo with the examples