HTML not able to get the id of div of hansontable

Tags: #<Tag:0x00007f13604f9f28> #<Tag:0x00007f13604f99b0>
#1

I am having a div element having id attribute set as “hot”.
I am using Angular.
In the ts file I get the element by accessing the id through document.getElementById(‘hot’)

Now till I am reciving the data from API I dont want to display the table and therefore I am holding a boolean variable named “loading” which is set from true to false on reciving the data through API.

I have applied “ngIf " (angulars attribute) to the div element which is *ngIf=”!loading"
The issue is though after getting the data having the loading boolean is set false, that means ngIf would satisfy and div would be visible but after this the place where I am accessing the div with id is not able to look through that element in DOM.

Have a look here: https://stackblitz.com/edit/handsontable-angular-yctsxw?file=app%2Fapp.component.ts,app%2Fapp.component.html

#2

Hi @rupeshfend

It looks that you used mismatched versions of Handsontable and Handsontable Angular wrapper. If you use v. 14.2.0 you should also use wrapper v. 14.2.0.

Additionally the approach in your example is not recommended, and here’s a guide on how the Handsontable should be used with Angular: https://handsontable.com/docs/javascript-data-grid/angular-basic-example/

1 Like
#3

Hello there, I tried with version 14.2.0 , but still i am getting the same issue.

#4

@rupeshfend

Thank you for the update, but as I mentioned, the general approach is not the way recommended by us. Please, use our guide I linked so the implementation matches our rules. Then you will be able to have access to the HotTable component, which has it’s own id and instance reference: https://handsontable.com/docs/react-data-grid/angular-hot-reference/