Saving data from rowclicked event in ag-grid with Angular

My goal is to save the event data from the onRowClicked event in a Component member. This way, when the user clicks a button, the data can be deleted. However, I am facing an issue where the member variable becomes undefined when trying to access it in the delete callback.

export class OilTypesComponent implements OnInit {
 ...
 selectedOil : any;
 gridOptions: GridOptions = <GridOptions>{};

 ngOnInit() {
 this.gridOptions = {
      ...
      onCellEditingStopped: this.cellEdited,
      onRowClicked: this.rowClicked
    }
 }
...
 rowClicked(event){
    this.selectedOil = event.data;
 }

delete(){
    console.log(`Deleting ${this.selectedOil.manufacturer} //this.selectedOil is undefined
  }

Answer №1

After some investigation, it turned out that the issue was related to scoping when passing in the callbacks. This helpful thread on Stack Overflow shed light on the problem: Dealing with 'this' being undefined in Angular2 component callbacks

To solve this issue, I made the following adjustments for both callbacks:

this.gridOptions = {
  ...
  onCellEditingStopped: this.cellEdited.bind(this),
  onRowClicked: this.rowClicked.bind(this)
}

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

issue with ng2-semantic-ui: remote options not properly loading in select

public optionsLookup(query:string, initial:any): Promise<any> { return new Promise ( (resolve, reject) => /*[{ id: 1, name: 'ololo1'}, { id: 2, name: 'ololo2'}]*/ this.apiService.get('private/count ...

Is it possible to include an if/else statement within a tailwind class in React components?

I want to dynamically change the background color of a div based on a condition. If the condition is true, I want the background color to be white; otherwise, I want it to be black. Despite trying to achieve this using an if/else statement, the background ...

React with TypeScript - Troubleshooting TS Error when Iterating over List Item (LI) Elements

Iterating through a group of <li> elements to strip away a specific class, then applying the same class to a different <li>. See the snippet below: useEffect(() => { if (dnArrowIdx === undefined) { const allLi = Array.from(document. ...

Creating an MPG4 Video from a Three.js Scene: What Are the Steps?

I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...

What is the method of including a null option in a dropdown menu?

I have a basic dropdown menu with the placeholder text "none." I want users to be able to clear their selection without adding another option to the dropdown. Can anyone help me achieve this? Thank you! Below is my code snippet: Check out the live demo h ...

How to send the value of a JavaScript loop variable to PHP using AJAX

How can I send variables in a loop to a PHP file using AJAX? var lat; var lng; var array = [22.399602, 114.041176, 22.344043, 114.0168, 22.327529, 114.087181]; console.log(array); for (var i = 0; i < 6; i += 2) { lat = array[i]; console.log("l ...

Unable to exchange values on the front-end of the next.js app despite the successful operation of the swap function on the back-end

I've built a currency conversion app using next.js and it's running smoothly. However, I'm trying to implement a feature that allows users to easily swap between the From and To currencies. Here is the function code for swapping currencies: ...

Issues regarding innerHTML

I have a collapsed table with a link that collapses its content. My goal is to change the link (such as from "+" to "-" and vice versa) using JavaScript. I was able to achieve this, but now my table no longer collapses. Here is the code snippet: <div c ...

Displaying Dates in an Express Application using EJS

I have a MySQL table with a column containing date data. I am building a webpage to display this data in a more user-friendly way. Currently, the displayed result looks like this: https://i.sstatic.net/lGamr.png I would like the dates in the column to ...

Google Sheets API v4 - Add a Row Above (Not Below)

Is anyone familiar with how to use the insertDimension request to insert a row above existing data? I am having trouble finding documentation on specifying where to add the row within the spreadsheet. The code I have inserts the row at the bottom, and I&ap ...

Is it possible to install a Chrome extension specifically for YouTube on Google Chrome?

Hey, I'm trying to eliminate thumbnail images from YouTube. The code I am currently using is: while (true) { $("ytd-thumbnail").remove() } As of now, when I input this code in the console, it successfully removes all thumbnail images. However, I ...

Seeking assistance with importing Json data into my HTML page using Python and AJAX

I've recently started delving into the world of AJAX and it's been quite some time since I last worked with JS. Currently, I'm using Python to generate valid JSON data, but my understanding hits a wall after that step. When I inspect the ele ...

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

Tips for formatting the body of a post request

After sending a data from a nodejs server Using POST REQUEST { "id": "285104348274884628", "username": "TEST USERNAME", "apiKey": "5WA8G5LUYPJB8RII64RE443EFTTY-PY" } The Post Code In ...

Adding a regional iteration of a library that was unable to be loaded

Recently, I have been experimenting with PhantomJS to capture screenshots of a webpage every five minutes. While the process runs smoothly most of the time, I encountered an issue where the AngularJS library fails to load intermittently. This results in th ...

Issues with react-bootstrap component Switches functionality not operating as expected

It looks like the bootstrap switches are not functioning properly. Even the documentation version is not working as expected <Form> <Form.Check type="switch" id="custom-switch" label="Check this switch" /> <Form.Check ...

Addressing memory leaks in React server-side rendering and Node.js with setInterval

Currently in my all-encompassing react application, there's a react element that has setInterval within componentWillMount and clearInterval inside componentWillUnmount. Luckily, componentWillUnmount is not invoked on the server. componentWillMount( ...

the power of using keywords and prototypes

Greetings! I am currently delving into the realm of JavaScript, hailing from a C++ background. The transition has proven to be quite perplexing for me. Below is a snippet of code that I have been troubleshooting: var someArray = []; nameCompare = function ...

How to insert space after every item generated by ng-repeat in AngularJS

I'm looking to evenly distribute elements based on this inquiry How to distribute li elements equally? I am utilizing angular with jade: ul li(ng-repeat="item in items") {{item.name}} However, ng-repeat does not create newlines after each element ...

The list in Ionic 3 search does not appear after clearing the search bar

Can anyone assist me with my search bar issue? I'm able to display words on the list, but once I clear the search bar, nothing shows up. Here is a snippet of my code: In my home.html file: <ion-searchbar (ionInput)="getItems($event)" [showCancelB ...