I'm building a table with infinite scroll option. The initial load is going fine but when the next batch of data is added to the table I'm facing some rendering issue (at least that is how I see it)
I can workaround it by explicit fire detectchanges() but I'm having difficulty to understand why I need to.
On line:70 of table-http-example.ts I have disabled the detectchanges() so that you can see the issue.
Anybody can help me out on this?
The problem your facing is that Angular can’t keep track of items in the Array and has no knowledge of which items have been removed or added.
The reason your getting rendering issues is because angular needs to re-render the whole array when there is a change because of my first point.
By using detectChanges(), your telling Angular to detect local changes and update the view, ref: What's the difference between markForCheck() and detectChanges().
To solve this you can use trackBy() which helps Angular track your changes and stops your whole re-rendering problem, ref: https://angular.io/api/common/NgForOf.
