We have over 500 rows from list on each request, sometimes it's 10 and sometimes its huge.

I want to take that array and only show what is visible on the screen and hide everything else, but has user scroll down it will display other rows and hide previous ones.

This is bit complex, I was watching RxJS video and Netflix did similar. I'm not sure what functions to use to have this effect.

https://gist.github.com/iBasit/8ceef1db9de945a37559 Netflix example.

Our code:

Observable.fromArray([0,1,2,.....500]).subscribe(row => show(row));

CodePudding user response：

I've written a couple articles (like this one) and various demos on how to do this "virtual scrolling thing", but basically what you need is either static row heights or the ability to determine if a given row will be visible on the screen (Row#isRowVisible in that gist you linked).

Then the easiest way to display rows afterwards is to absolutely position them such that you either multiply the index by your static row height OR calculate where the row should display somehow.

This is a pretty rough demo of how to do this in React, but the ideas are very similar (you might be able to just copy paste the RxJS code from that or my Cycle.js example). I'd encourage you to try making it yourself though.

Also, 500 items really shouldn't be much of a problem for angular2 (it's really fast), unless you have a ton of elements in each row.