Using handsontable with Angular and NGXS

Tags: #<Tag:0x00007efc65035be8>
#1

Hi, i’m new to Handsontable and also NGXS. I’m having trouble implementing both together cause by default the state in NGXS are readonly and I have to use their own operators to update my Angular models/data. I can already display data on the table, the problem starts when I try to edit. Since the state is read only it causes an error when Handsontable try to update the table’s data source which is from the state.

So is there a way to override the table’s saving event? Instead of it updating the data source i’ll just update it on my own using state operators? Or any other solution?

Also just wanted to add that in my use-case cloning the object is not an option.

Thanks

#3

Hi @alladojed

If you could recreate the issue using this template that would be very helpful for us to further investigate the issue.

#4

Thanks for replying and i’ll try to create one. But since you want me to recreate the issue, does that mean that handsontable should work properly (with viewing and editing) with NGXS? Cause what I do is I have a state Selector like this:
@Selector(SampleState.getAll) data$: Observable<any>;

Then I use it on the handsontable like:
<hot-table [data]="data$ | async" [settings]="hotSettings"></hot-table>

The table loads the data and display everything. The problem occurs when I start editing and press enter then I get the following error:

image

#5

Hi @alladojed

We don’t have any official support for NGXS, but when you recreate the issue we might able to see if the problem lies in integration with Handsontable. Please, keep in mind, that Handsontable have its own state manager and it might produce problems while integrating with frameworks that use their state managers.

#6