I did two things to resolve the issue
- 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.
- 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"