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?

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

Encountering an issue where trying to access `mywebsiteurl/radar-input` or `mywebsiteurl/daily-submissions` results in a `404 Not Found` error. The components load correctly without using the routing method, indicating the problem might lie there. Below is ...

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

To transform the h3 tag into a clickable link with jQuery and set the href attribute, while preserving the H3 styling and adding an anchor tag, you can use the following code as an example: Click Here ...

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

I initially created a web page using pure JS, CSS, and Django. Feeling quite ineffective, I decided to try using React JS instead. However, upon making a simple React component, I encountered a problem - I wasn't sure how to incorporate this component ...

JavaScript problem indicating an error that is not a function

Recently, I've delved into the world of JavaScript and am currently exploring JavaScript patterns. I grasp the concepts well but struggle with calling functions that are already in an object. var productValues = 0; var cart = function(){ this. ...

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

I recently started delving into NodeJS development and have configured Visual Studio Code for JavaScript development in node applications. During a Pluralsight lecture on Objects, the instructor demonstrated creating two scripts, dice.js and program.js, a ...

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

I am encountering an issue where my code is functioning correctly in the console but it is not saving data to the database. Every time I restart the server, the data gets reset. While I can read data from the database without any problem, the issue arise ...

I could not retrieve data from the Promise {} object

Currently, I am in the midst of developing a discord bot using discord.js. When attempting to retrieve the target user, I utilize the following code: let target = message.guild.members.fetch(id). This method yields either Promise { <pending> } if the ...

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

Why is the following code not functioning properly in jQuery 1.9.1? It worked fine in previous versions. $(function () { $(document).append(test); document.write('done'); }); var test = { version: "1.0", }; JSFiddle: http://jsfiddl ...

Using i18next to alter language in a React app

Implementing the i18next translation system into my React app was a breeze thanks to a helpful guide I found. However, I'm facing an issue with changing the language manually. The guide covered the setup process perfectly, but lacked information on ho ...

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

I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect. Any assistance would be greatly appreciat ...

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

myComponent.component.ts ngOnInit() { this.getData.getAllData().subscribe( response => { console.log(response); this.dataArray = response; }, () => console.log('there was an error') ); } myservi ...

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

Working on a React-based web app, I am trying to determine the number of syllables in a textarea as the user types. Encountering errors like "cannot find length of a null" at every turn. Right now, all I want is to utilize console.log() for troubleshooti ...

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

Struggling to find the best approach for managing a header navigation in Vue 2 using Vuex with VueRouter. The main issue is creating a dynamic 'header' type navigation in App.vue. <div id="nav"> <!--Trying to create a dynamic ...

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

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

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

Can you please advise on how to extract the value from a radio button and send it using $http.post in AngularJS? Here is an example: HTML <input name="group1" type="radio" id="test1" value="4"/> <label for="test1">Four paintings</label ...

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

Seeking assistance with a task: I need to open a locally stored server file, search for a specific word, and then print the next word after finding the specified one. I have managed to write code that successfully opens the file, but it currently prints e ...

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

After tackling React-Router with Typescript, I encountered a typing issue that has me perplexed. Prior to this, I was using an older version of React and React-Router. But now, after updating to the latest builds using yarn, I'm facing this hurdle. ...

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

I recently updated a project from Angular 5.x to 7, and I'm facing an issue with returning an httpClient observable. In Angular 7, there seems to be a change in how the "catch" method works and it's causing an error in my callApi function. The er ...

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

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture. https://i.stack.imgur.com/1TgyQ.jpg ...

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

Currently, I am in the process of modifying a user interface that utilizes Material-UI components. The task at hand involves increasing the thickness of the borders on certain outlined buttons. Is there a method through component props, themes, or styles t ...