Handsontable Angular Events lose reference to component

Tags: #<Tag:0x00007f8b1d3969a8>
#1

I am using Handsontable with Angular with Angular 6 wrapper.

I am listening to afterSelectionEnd event using this

<hot-table
  [data]="ssData"
  [rowHeaders]="true"
  [colHeaders]="columns"
  [columns]="columnDef"
  [colWidths]="colWidths"
  [outsideClickDeselects]=false
  [afterSelectionEnd]="afterSelectionEnd"
  >
</hot-table>

I expect the ‘this’ reference point to the component in the afterSelectionEnd() method.

But, the value is null. Is this a known issue or am I doing something wrong?

Any help would be appreciated.

Thanks

#2

Hey @lihigivuca

The first parameter is core, then the coordinates for older versions (before wrapper v 5)

and in the latest, we do not use the core as the first parameter

https://jsfiddle.net/AMBudnik/h1r9oLu2/

Here’s the changelog https://github.com/handsontable/angular-handsontable/releases

#4

Hi Aleksandra,

I understand the arguments but the reference to the component is lost.
In the callback, afterSelectionEnd(), the ‘this’ should refer to the component.

Seems like it is not. Can you provide an example where the selected row and column are stored as fields in component and whose values is set in the afterSelectionEnd() function?

#5

Here is an example on how to get the reference to the instance/component https://handsontable.com/docs/7.1.0/frameworks-wrapper-for-angular-hot-reference.html

#6
#7

@aleksandra_budnik I am worried that the OP’s problem was not solved by the link that you provided.

The problem is that in the user’s Angular component method, “this” refers to a wrong thing. The same problem can be seen in the “onBeforeChange” method in this JSFiddle: https://jsfiddle.net/warpech/t2doLs3k/6/ (“this.id” resolves to undefined)

The workaround is to provide the callback function in the options object, not in the HTML template, as presented in the “afterChange” method in the same JSFiddle.

#8

Hey @warpech

You are right. Based on my current perspective in 2023, I completely agree with your point. Actually, that made me think. I could review older topics on the forum and update them if there’s anything left unsaid. Thank you for updating the topic and for the inspiration.

1 Like
#9

Thank you @aleksandra_budnik. I think that this behavior is actually a bug in our wrapper, because it is not what an Angular developer expects.

#10

Sorry for the delay @warpech I needed to consult someone from the dev team to confirm that this is not an error. When the function onBeforeChange is written like this

onBeforeChange(...args) {
    console.warn('onBeforeChange id', this.id, args);
}

we get undefined for this.id, but we can use another syntax with the arrow function

onBeforeChange = (...args) => {
    console.warn('onBeforeChange id', this.id, args);
}

to get thehotInstance.

But still, I think that I should have included a code snippet when this thread started back in 2019.

#11

You are absolutely right. The syntax presented in the first snippet in your comment would only work if hot-table component supported Angular outputs (https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component), which it does not right now.

With Angular outputs, it would look like that: https://jsfiddle.net/warpech/rc682h3g/1/ (see line 10)