Virtual Scrolling Directive in Angular 7 - a tad naive?

[Tim Consolazio]

If you were a Flash Developer, virtual scrolling isn't new to you at all. The idea is, that while all the data is bound to the component, the only rows that are rendered are the ones visible in the scroll window. As the user scrolls, the renderers used to display the rows are reused.

I've had to write a couple of these sorts of things from scratch, as nothing I found online ever really seemed to be overall stable, and simple enough to use straightforwardly. You always ended up dealing with some difficult bug or missing config of some kind.

In Angular 7 CDK, they now have a "scrolling" section. One of the features available is the "virtual scrolling" capability.

I wrote a fairly sophisticated list component which can be dynamically fed a row renderer. It uses the Angular component factory to create instances of that renderer type, feed it data, and display it as a row. This gives the component tremendous power and flexibility; you can display any data any way you want by simply creating a new renderer and feeding it to the list. The data is searchable and sortable by default and so on.

However, the virtual scrolling directive provided by the ScrollingModule seems pretty naive. If you're not using the new template directive "*cdkVirtualFor", it seems that adding items to the ng-container that holds the rows just adds them all anyway. So it's good for basic "iterate the data" use, but not much use for a stronger enterprise component.

Anybody have any info on that one?