Virtual scroll for Angular 2+

Question

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.

No. I can't handle that much records in DOM. If I use the infinite scroll, DOM elements will be increased whenever I scroll down. That's why I'm going for virtual scroll — Navaneethan, Feb 21 '17 at 05:43
Check out this Observable based implementation: https://github.com/dinony/od-virtualscroll There are also many examples! — dinony, Jun 19 '17 at 07:37

score 1 · Answer 1 · answered May 03 '18 at 18:40

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.

score 1 · Answer 2 · answered Jul 31 '19 at 23:46

I strongly recommend ngx-virtual-scroller

It is very robust handling dozens of thousands of complex elements without trouble. I use it in my open source Video Hub App to show a gallery of images & videos (custom elements) allowing the user to change the number of columns. See GitHub for code.

Piero · Answer 3 · 2017-03-09T13:59:42.940

0

You should have a look at Angular Material VirtualRepeat https://material.angularjs.org/latest/demo/virtualRepeat

The md-virtual-repeat directive provides a md-on-demand attribute which avoids having an array as the data source provider.

[Edit] The Angular Material VirtualRepeat not being available for angular2 yet, I did a few changes on rintoj/angular2-virtual-scroll to get the data from the backend and not from an array. it's on github here https://github.com/pnocera/ng2-vscroll

edited Mar 09 '17 at 13:59

answered Mar 08 '17 at 12:49

Piero

1,638
1
13
14

Actually, I'm trying to achieve the virtual repeat in AngularJs-2. But the above examples are for AngularJs. – Navaneethan Mar 08 '17 at 13:24
I just realized that, sorry. I have the same thing to do and still couldn't get the angular2-virtual-scroll to work. – Piero Mar 08 '17 at 21:38

Virtual scroll for Angular 2+

3 Answers3