Reputation: 7138
I am trying to send data to my popover component but it doesn't send the data.
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?
Upvotes: 0
Views: 435
Reputation: 3878
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 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();
}
Upvotes: 1