Refresh Handsontable Angular 4

Question

I am using n2-handsontable with angular 4 for a project. I can't seem figure out how to refresh the table when the data has changed. I found this post:

Refresh a handsontable

It seems to be what I want but I can't figure out how to access the handsontable object. My initial thought was to use # for binding but it isn't working as intended, it just passing 'undefined' to the function.

component.html

 <button class="btn btn-default" (click)="add(hot)">Add</button>
 <hotTable [data]="_dataHot"
                  [colHeaders]="_columnHeadersHot"
                  [columns]="_columnsHot"
                  [options]="{contextMenu: true}"
                  #hot>
</hotTable>

component.ts

add(hot){
    //do stuff
    hot.render();
}

edit: I could force a render by doing ngIf tricks but that doesn't seem like a good solution.

Answer 1

I had the same problem initially and was not able to figure out how to access the render function. Using the following line in the component.ts file does the trick for me.

hot.getHandsontableInstance().render();

What I am not sure about is why passing #hot returns undefined for you. I am listing my code snippets below.

component.html

<hotTable 
    [data]="data" 
    (afterChange)="afterChange($event, hot)" 
    [colHeaders]="colHeaders" 
    [columns]="columns" 
    [options]="options"
    [colWidths]="colWidths"
    #hot>
</hotTable>

component.ts

private afterChange(e: any, hot) {
    // some commands
    hot.getHandsontableInstance().render();
}

Answer 2

You need to grab the reference to hot inside your code using ViewChild decorator. You can store it in the variable of the same name.

@ViewChild('hot') hot

Now you can access the instance of the component in your class as this.hot.

Answer 3

UPDATE: 6/24/2020

For those still struggling this or would like what I think is a more correct answer I created a sandbox for you all: https://codesandbox.io/s/patient-glade-6e0o3?file=/src/app/app.component.ts

Steps:

1. Add #hot (or some other identifier) to your handsontable component like so

<hot-table #hot [settings]="settings" [width]="552" [height]="600" licenseKey="non-commercial-and-evaluation"></hot-table>

2. Refer to the handsontable component inside your component like so

@ViewChild("hot", { static: false }) hot: HotTableComponent;

3. Update your table with new data by using the updateHotTable method provided by the handsontable component like so

// inside your component
settings: Handsontable.GridSettings = {
 data: [/* some data */]
}


updateTable(){
 // do something to update settings
  this.hot.updateHotTable(this.settings);
}

Then you should be all set.

The reason why I wanted to update this post is because the method in the answer no longer exists on the component. Even though the hotInstance property does exist, it's labeled as private by the devs.

Answer 4

When using hot-table ngOnDestroy method should call

 ngOnDestroy() {
    this.hot.getHandsontableInstance().destroy();
}

And then in the onChanges you can pass the updated data

ngOnChanges() {
    this.tableDataChange.next(this.tableData);
}

[1]: https://i.stack.imgur.com/3n8MH.png - ngOnChanges

[2]: https://i.stack.imgur.com/GwRPC.png - ngOnDestroy