CODEWITHSUNDEEP
htmlangularvirtualscroll
Navaneethan
Navaneethan

Reputation: 1029

Virtual scroll for Angular 2+

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.

Upvotes: 3

Views: 7464

Answers (3)

Boris Yakubchik
Boris Yakubchik

Reputation: 4463

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.

Upvotes: 1

dhilt
dhilt

Reputation: 20844

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.

Upvotes: 1

Piero
Piero

Reputation: 1726

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

Upvotes: 0

Related Questions