Ionic Modal not passing data back

Issue

The problem is that data being sent back from modal is undefined The function I’m using to open my modal is below:

async openResultsModal() {

  this.ResultsPopover = await this.modalController.create({

    component: ResultsPage,

    componentProps: {

      gameMode: this.gameMode,

      Localresult: this.LocalGameResult

    },

    mode: "ios"

  });

  this.ResultsPopover.onDidDismiss().then((dataReturned) => {

   if (dataReturned !== null) {

    console.log(dataReturned.data);

  }

  });

  return await this.ResultsPopover.present();

}

However, This function is inside a service file and I am calling it in a timer like so: The timer will need to stay

  setTimeout(() => 
  {
      this.openResultsModal();
  },
  1500);

My modal page is like this:

export class ResultsPage implements OnInit {
  gameMode;
  Localresult;

  constructor(navParams: NavParams, public modalController: ModalController) { 
    this.gameMode = navParams.get('gameMode'); 
    this.Localresult = navParams.get('Localresult'); 
  }

  ngOnInit() {
  }

  ionViewWillLeave(){
    this.closeModal();
  }

  async closeModal() {
    const onClosedData: string = "This is Data";
    await this.modalController.dismiss(onClosedData);
  }



}

The data that is returned to my service file is undefined. Is it because I am using the JavaScript setTimeout() function?

Solution

I don't think using a setTimeout can cause this issue. Let's find it out, try the following code which is working on my end.

    this.modalCtrl.create({
        component: ResultsPage,
        // backdropDismiss: false, // uncomment to prevent dismiss the modal via backdrop click
        componentProps: {
            gameMode: this.gameMode,
            Localresult: this.LocalGameResult
        }
    }).then((resultPageModal) => {
        resultPageModal.present().then((x) => {
            console.log('Modal was presented');
        });
        return resultPageModal.onDidDismiss();
    }).then((result) => {
        console.log('Captured Data', result.data);
    })

If this works, then the issue was related to one of the Promises in your chain.

EDIT 1:

The problem seems to be related to the way you're closing the modal. As far as I know, you are not able to pass data back if the modal is dismissed via backdrop click (I will investigate more about this and update the answer accordingly) so

 ionViewWillLeave(){
    this.closeModal();
  }

Will not work.

Instead, you should add a click listener to the close button of the modal (or to any other button) and set the backdropDismiss: false during the modal creation

<ion-header>
    <ion-toolbar>
        <ion-title>My Modal Title</ion-title>
        <ion-buttons slot="primary">
            <ion-button (click)="onDismiss()">
                <ion-icon name="close" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding ion-text-center">
    <h1>This is the content of the Modal</h1>
    <ion-button (click)="onSaveData()">Save Data!</ion-button>
</ion-content>

You .ts file should look like this

export class ResultsPage implements OnInit {

    @Input() gameMode: GameMode; // Use the right type here
    @Input() Localresult: Result; // Use the right type here

    constructor(private modalCtrl: ModalController) {
    }

    ngOnInit() {
    }

    onSaveData() {
        this.modalCtrl.dismiss({message: 'It works'}, 'accept').then();
    }


    onDismiss() {
        this.modalCtrl.dismiss(null, 'cancel').then();
    }

}

A final recommendation, probably you don't have to use the NavParams. Ionic's ModalController will set the componentProps automatically for you if you define these props as @Input() in the Modal Component

Answered By - guzmanoj