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