Returning data from an Ionic4 Modal

Ionic Framework
1

Howdy folks,

As with a bunch of others I’m having issues with using Modals in Ionic4.I have no problems displaying the modal or passing data to it. What I’m trying to get working is returning data from the modal…

I have a modal presenting with a FormGroup on it.
On submission of the form I want to do stuff with the data and dismiss the modal.
But I can’t figure out how to do either from within the modal itself.

The example in the documentation sets up an event listener on the button click to dismiss.

Should I create set up an events listener and use that to close the modal after processing the form data?
That seems excessive compared to v3 mechansim of viewcontroller.dismiss(data)

Any advice appreciated

D.

1 Like
2

-> [Ionic-v4] Modal Parameters

3

Hi Richard,

Thanks for the response. I have managed to get it working, but I don’t know how it works.

In the parent page I have the following function to display the modal

parent.page.ts

    const modal = await this.modalCtrl.create({
      component: DiaryAddPage,
    });
    modal.onDidDismiss((data) => {
      console.log(data);
    });
    return await modal.present();
  }

In the modal I have this
modal.page.ts

  saveForm(): void {
    console.log('save form', this.newDiaryForm);
    this.modal.dismiss(this.newDiaryForm.value);
  }

This.modal apparently exists, in the modal, but I don’t know how…
Something to do with the way the modal page is loaded in by the parent.

Thanks again.
D.

1 Like
4

parent is ok

in modal, is this.modal a reference to the ModalController you injected in the constructor of the modal?

constructor(private modalCtrl: ModalController) {}

saveForm(): void {
   this.modalCtrl.dismiss(this.newDiaryForm.value);

}