Search code examples
ionic5

Pass data to a popover in Ionic 5


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.


Solution

  • 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;
    }