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.

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

11
Leave a Reply

avatar
4 Comment threads
6 Thread replies
7 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Matthew HarrisprincepatelHaPhamJolly.exeteest Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
teest
Guest
teest

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

HaPham
Guest
HaPham

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
Member
Matthew Harris

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

In the home.page.ts 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
Member
Matthew Harris

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

ngOnInit() {
console.table(this.navParams);
this.modelId = this.navParams.data.paramTitle;
this.modalTitle = this.navParams.data.paramID;
}

Firmo
Guest
Firmo

Its possible pass an html or an content to modal?