Unable to transfer data through Ionic popover

Question

Unable to transfer data through Ionic popover

I've encountered an issue when trying to pass data to my popover component, as the data doesn't seem to be sent successfully.

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 (unable to retrieve sent data here)

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

Any thoughts on what might be causing this issue?

javascript angular typescript ionic-framework

Answer 1

Answer №1

You have the ability to utilize componentProps for sending 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();
}

To access the data within the MessagesComponent, you can use navParams:

constructor(private navParams: NavParams) {}

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

Sending data back to the original page

You can send data back from your component using dismiss.

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

Be prepared to receive it within the presentPopover function after construction

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();
}

Answer 2

You have the ability to utilize componentProps for sending 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();
}

To access the data within the MessagesComponent, you can use navParams:

constructor(private navParams: NavParams) {}

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

Sending data back to the original page

You can send data back from your component using dismiss.

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

Be prepared to receive it within the presentPopover function after construction

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();
}

Unable to transfer data through Ionic popover

Code

Answer №1

Sending data back to the original page

Similar questions

Error 404: The requested resource could not be located on the server running nginx with Angular version 8

How can you use jQuery to transform a H3 tag into a clickable link?

Is there a way to implement a react component into an HTML file?

JavaScript problem indicating an error that is not a function

Error message: "Attempting to assign a value to the 'size' property of an undefined object, despite the fact that

I am experiencing issues with my local MongoDB database not properly storing data when using Express and Mongoose

I could not retrieve data from the Promise {} object

What is causing the issue with $(document).append() method in jQuery version 1.9.1?

Using i18next to alter language in a React app

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

An issue has occurred while attempting to differentiate '[object Object]'. Please note that only arrays and iterable objects are permitted

Is there a way to determine the number of syllables in text as it is being typed?

Customizing the Header Navigation in Vue App.vue Across Various Views

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

Using AngularJS to pass radio button value to a $http.post request

JavaScript tutorial: Locate a specific word in a file and display the subsequent word

Here's a way to resolve the issue: ReactDOM.render() - TS2345 error: Cannot assign type '() => Element' to type 'ReactElement' in the argument

What is the best way to retrieve an Observable in Angular 7?

Custom div element obstructs information window on map due to lack of auto panning feature

How can I adjust the border width of outlined buttons in material-ui?