Pass data to a popover in Ionic 5

Question

In Ionic 3, passing data to a popover was as simple as:

let popover = this.popoverCtrl.create(PopoverPage, {key1:value1, key2: value2});

and it could be retrieved with navParams

How do you achieve the same in Ionic 5? The documentation says nothing about passing data.

Answer 1

I figured since we're dealing with parent and child components much like with modals, I'd adapt the documented modal method of passing and retrieving data (i.e. using the componentProps property):

  this.popover = await this.popoverController.create({
      component: popoverComponent,
      componentProps: {key1: value1}
  });

And to get the data passed, I simply set it as an @Input():

export class ModalPage {

  // Data passed in by componentProps
  @Input() key1: string;
}

Answer 2

Click to show popup

showPopup(){
        this.popoverController.create({
          component: PopupPage,
          translucent: true,
          cssClass: '',
          mode: 'ios',
          componentProps: { key1:value1, key2: value2 }
        }).then((popover: any) => {
          popover.present();
        });
}


Get Popup Data page(popup.page.ts)

constructor(public navParams: NavParams){
const key1= this.navParams.get('key1');
const key2 = this.navParams.get('key2 ');
}