Passing data in FROM modal

Ionic Framework ionic-v3
1

Hi everyone
I am trying to do the following:

  1. Click empty list item in a list
  2. The click opens a modal page with a list of selectable items
  3. The user can then select one or more items on the modal page
  4. The user then clicks close on the modal page and the items selected get passed to the first page that opened the modal and inputed into the list item that was clicked

I still somewhat of a noob, complete code examples would be great.
Thank you all in advance
Eric

2

see documentation here… under advanced http://ionicframework.com/docs/v2/api/components/modal/ModalController/

 dismiss() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }

you basically have a dismiss method in the Modal component to pass the data back to the parent component

   profileModal.onDidDismiss(data => {
     console.log(data);
   });

in the parent component you have capture the onDidDismiss response to get the data

4 Likes
3

Thank you Aaron! Using the code you provided allowed me to see foo: bar in the console when I dismissed the modal. I’m still confused as to how I:

  1. Allow my end user to click an empty item on one page
  2. Launches a modal with a list of items
  3. The user clicks one of the items in the list
  4. The modal closes
  5. The selected item is populated in the empty item that was originally clicked in #1
    I have no code to show you, thats what I need help with.
    Thanks
    Eric
4

This would be in home.html
<ion-item (click)="doGoToModal"></ion-item>

home.ts

doGoToModal(){ let groupModal = this.modalCtrl.create(ModalPage, { data: groupQuestion}); groupModal.present(); groupModal.onDidDismiss(data => { console.log('modal data sent to main form', data) }); };

modal.html

This is where you display the list.

modal.ts

doSubmitDataToMainForm() { let data = [this.modalForm.value]; //or some value of the list if its not a form console.log('this is the value being sent back to the main form', data) this.viewCtrl.dismiss(data); };

This should get you started. I finished something like what you are doing a few days ago. If you need more detail let me know. But going through the Ionic Docs really helped me.

Also check out the ‘Demo Source’ on this page.

And just a bit of a tip with working with passing params, console.log(//your param here) is going to be your best friend!

5

Hi andrewgy8
for the life of me, i just cannot get this going. i am using the code from the API docs on the ionicframework.com site.

page that launches modal ts:
patientModal(){
let addPatientModal = this.modalCtrl.create(PatientModalPage);
addPatientModal.onDidDismiss(data => {
console.log(data);
});
addPatientModal.present();
}

modal page ts:
dismiss() {
let data = { ‘foo’: ‘bar’ };
this.viewCtrl.dismiss(data);
}

I can see foo: bar in the console when i dismiss the modal. I’m stuck trying to figure out how to display foo: bar on the page that launched the modal. of course this is not the desired end goal, but i would be extremely happy if i could manage that. :smile:

thanks
e

6

Assign it to a public property of your component in place of the console.log line, and then you can grab it from there in your template using interpolation syntax or whatever.

7

Excellent! and thank you! would you mind showing me what this looks like exactly?
thank you in advance
e

8

Hi

Find my working solution

In Page:

openModal(){
let testing=this.modal.create(TestModal, {ModalValue: this.value });
testing.present();
testing.onDidDismiss(data => {
console.log(data);
});
}

In Modal:

goPrevious(){
this.view.dismiss(data);
}

9

@andrewgy8 i did successfully my modal is showing up i can input the info and get back to main page but now i will like to save both modal and main page to firebase how do it proceed? please
i used ngModel for the form in the main page it save the main page to firebase but not the data from modal

10
Discuss your Objectives

No CV at hand? Please answer the questions

Sample CV Apply Now Discuss your Objectives

//here is the button that opens the modal

No CV at hand? Please answer the questions

Sample CV Apply Now
11

hello. did you perhaps found the way to display the data on the page that launched the modal?

12

hi there, how do you assign the {ModalValue: this.value}? i cannot seem to understand that part :frowning: