Ionic popover won't send data

Question

I am trying to send data to my popover component but it doesn't send the data.

Code

HTML

<div class="message" id="conversation" *ngFor="let message of messages.notes">
    <ion-row class="message-body">
      <ion-col (click)="presentPopover($event)" size="12" class="message-main-sender" *ngIf="message.user.id === user.id; else receiverNote">
          // rest of message detail...
      </ion-col>
    </ion-row>
</div>

component

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: MessagesComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
}

popover component (can't get sent data in here )

reply() {
    console.log('my_data1 : ', this.navParams.get('data')); // undefined
    console.log('my_data2 : ', this.activatedRoute.snapshot.paramMap.get('event')); // null
}

Any idea?

Answer 1

You can use componentProps to send data to your popover

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: MessagesComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true,
      componentProps: {
        id: 1
      }
    });

    return await popover.present();
}

Get the data in the MessagesComponent with navParams:

constructor(private navParams: NavParams) {}

ngOnInit() {
  console.log(this.navParams.get('id')); // 1
}

---

Send data back to original page

Send data back in your component with dismiss.

this.popoverController.dismiss({ id: 1 });

Ready to receive it inside the constructed presentPopover function

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      // ...
    });

    popover.onDidDismiss().then((result: object) => {
      if (result['data']) {
        console.log(result['data'].id) // 1
      }
    });

    return await popover.present();
}