Virtual scroll for Angular 2+

Navaneethan picture Navaneethan · Feb 20, 2017 · Viewed 6.9k times · Source

Hi there!

I am in need to create a table with so many records using Angular 2+. For that, I'm trying virtual scroll. Still, I can't find any documentation or samples in a working condition.

Please help me for getting started with Angular 2+ virtual scroll.

Answer

dhilt picture dhilt · May 3, 2018

You may try ngx-ui-scroll. It provides *uiScroll structural directive that can be directly used in your App component's template. It currently (v0.0.4) doesn't support table-layout, but if you can use div-layout, it may look like

<div class="viewport">
  <div *uiScroll="let item of datasource" class="row">
    <div class="col1">{{item.data1}}</div>
    <div class="col2">{{item.data2}}</div>
    <div class="col3">{{item.data3}}</div>
  </div>
</div>

Then you need to implement the Datasource object in accordance with documentation or code samples from the demo page.