Ionic 4 - Pass Data BACK from Popover without dismissing

Question

In Ionic 4, I would like to pass data from Popover controller to the view page.

I am able to get the data onDismiss() but I would like to do it without exiting the popover.

Below is the code snippet I tried onDismiss() and it worked.

Do we any other popover methods or state changes that can be captured

Page

async presentPopover(opts) {

    console.log(opts);
    const popover = await this.popoverController.create({
      component: RouteDetailsPopoverComponent,
      componentProps: {
        viewType: this.viewType
      },
      event: opts.event
    });

    popover.onDidDismiss()
    .then((result) => {
      console.log(result['data']);
      this.viewType = result['data'];
    });

    return await popover.present();
}

And here's the popover component

changeRouteDetailView(mode: View) {
    this.viewType = mode;
    this.popCtrl.dismiss(this.viewType);
}

Without dismissing the popover, can I pass the data back?

Answer 1

Into the page you call the popover component, type this after 'create()' & 'present()' methods to use the popover:

const { data } = await popover.onDidDismiss();

'data' will storage the value you sent from popover component in the page you called the popover component.

At the same time, in the popover component you need to sent the data to the page. Use this line code inside the method you required to return from the popover:

this.popoverCtrl.dismiss({ data_you_sent });

This method, dismiss(), return data (in case you sent) and also close the popover.