ionic 3 passing data to popover

Question

I am unable to make it work. The popup calling code is

presentPopover(myEvent){
        //alert('invoke popup')
      let popover = this.popoverCtrl.create(PopoverPage, this.data);
      popover.present(
          {
            ev: myEvent
          }
      );
}

and the part where i need to access currently is:

export class PopoverPage{

  constructor(public viewCtrl: ViewController) {
   // alert('in the popup')  
   //alert(this.data)
  }

So how will the data be avaialbe in the popupover page component ?

Suraj Rao · Accepted Answer · 2019-04-05T09:48:54.857

46

Parameters/data can be passed to the Popover like this

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

And then you can use NavParams to retrieve the data passed to the Popover.

    export class PopoverPage{        
      constructor(public navParams:NavParams) {
       console.log(this.navParams.data);
       let value1 = this.navParams.get('key1');
       let value2 = this.navParams.get('key2');
      }
    }

For ionic v4, you can send data using componentProps to pass data and retrieve through navParams.

const popover = await this.popoverController.create({
      component: PopoverPage,
      componentProps:{key1:value1, key2: value2}
    });
    return await popover.present()

edited Apr 05 '19 at 09:48

answered Jul 14 '17 at 06:55

Suraj Rao

29,388
11
94
103

Also, you can get data in popover component and via View Controller, which is a more correct way: import { ViewController } from 'ionic-angular'; export class PopoverComponent { constructor( public viewCtrl: ViewController ) {} // here we are getting data object which we set in parent component public data: any= this.viewCtrl.data; } – nikola.maksimovic May 24 '18 at 14:04
@nikola.maksimovic thats interesting... I will have to check and update.. The [doc](https://ionicframework.com/docs/api/navigation/ViewController/) doesnt seem to show that property.. – Suraj Rao May 24 '18 at 14:21
1

what is method in ionic 4. I got undefined in ionic 4 for this method – sainu Apr 05 '19 at 05:49
Ya I got it. In ionic 4 there is a property called `componentProps` in `PopoverController` Description:The data to pass to the popover component. Type :{ [key: string]: any; }. And we can retrieve it as same as ionic 3, means as `NavParams` @SurajRao – sainu Apr 05 '19 at 07:40

score 7 · Answer 2 · edited Apr 05 '18 at 06:42

You have to pass this.data as an json object, after then you can access the value with key.

Calling popup code:

presentPopover(myEvent){
    //alert('invoke popup')
  this.data = {data_key:'your_value'};
  let popover = this.popoverCtrl.create(PopoverPage, this.data);
  popover.present(
      {
        ev: myEvent
      }
  );
}

Accessing value from popover:

export class PopoverPage{
  constructor(public viewCtrl: ViewController,public navParams:NavParams) {
     // alert('in the popup');
     //alert(this.navParams.get('data_key'));
  }
}

ionic 3 passing data to popover

2 Answers2