Ionic - how to communicate between Popover Page and Other pages?

Hi Team,

I’m looking for the best solution to communicate between Popover Page and Pages where opening Popover button exists.

1). How to get data/value from Popover and use it inside Target Page?
2). How to create Popover Service properly to use custom Popover on few pages ?

Thank you in advance ! (give the beginner a chance to be better :slight_smile: )

1 Like

Hi Richard, I am also a bit of a beginner but I have successfully done this using a callback that is passed through in the data options object that is passed to the popover when the popover is created.

So then you call the callback from the popover, on a click event, say, and pass through the data from the popover into the callback function, which you then use to update data on your main page.

Personally, I would prefer it if I could push the popover onto the nav stack and utilize it as a child component to the parent page it is called from, but right now the way the popover is created it is not a child of the page it is called from, it is actually on its own branch at the top of the tree, and its parent is the IonicApp, which I am finding somewhat problematic.

Code:
// page popover is called from, this is the function that opens the popover showNotifications(event){ let popoverData = { updatedDiseases: this.updatedDiseases, badgeCount: this.badgeCount, callback: (arr) => { this.badgeCount = arr.length; } } let popover = this.popoverCtrl.create(NotificationsPopoverPage, popoverData); popover.present({ev: event}); }

and then in the popover component file when my clearNotifications() function is called on click, I have altered the length of my array, which I want to change my badgeCount value on the page that called the popover. So I pass back through my data array and it updates that on the main page:

// function called on popover page clearNotifications(){ this.callback(data); }

4 Likes