How to get scrollWidth and offSetWidth of div which is being used as ngx-datatable-cell-template inside ngx-datatable

Question

I want to get the scrollWidth and offSetWidth of div which I have in one child component and i am loading the child component as ngx-datatable-cell-template inside ngx-datatable. Always i get the values as 0

I added template variable for the div element and created a variable in the component using ViewChild. I tried to get the values from ngAfterViewInit method. The variable.nativeElement.offsetWidth always gives 0. I am doing all these in child component.

Does any one has any idea why this is always giving 0 value?

Answer 1

I did two things to resolve the issue

1. I used setTimeOut inside ngAfterViewInit method. And i read the offsetWidth and scrollWidth of UI elements from inside of setTimeOut. Timeout duration is 0.

this.commentsDiv.nativeElement.offsetWidth
this.commentsDiv.nativeElement.scrollWidth

When i try to read the values outside of setTimeOut, i get only 0. Because ngx-DataTable rendering is still happening. setTimeOut executes the statements only after they are available/rendered.

2. When we update the content of the ngx-datatable, the table just updates the content of the rows and it doesnt recreate them.

For example, there are already two rows on the grid. Now we are updating the grid with three records. the table will update the existing two records with the new records. In this case, for these records, the underlying child component's "ngOnInit and ngAfterViewInit" will not be fired. If we want to change anything on these rows based on the new content, we need to do it with the help of "ngOnChanges and "ngAfterViewChecked/ngAfterContentChecked".

When we use ngAfterViewChecked/ngAfterContentChecked, we need to be careful, as they are getting fired even when we do mouse over.

For the third new row, the table will create new row and the underlying child component will fire "ngOnInit and ngAfterViewInit"