Ngx-infinite-scroll: pros and cons comparing to other libraries

[NiNJAD3vel0per]

There are a couple of angular infinite library. such as od-virtualscroll and ngx-virtual-scroll.
I am actually looking for material cdk virtual scroll. But, it seems that it only support one column based scroll strategy.
I couldn't find a good example using multiple column with CDK virtual.

This library has some advantage comparing to other libraries that I mentioned ?
Looks like this library works nicely with multiple grid columns

[orizens]

i'm not familiar with the other libraries.
ngx-infinite-scroll was extracted from http://github.com/orizens/echoes-player project, so other may use it and improve it.
in contrary to virtual scroll strategy, it does not rely on how items are defined or on its height, but rather purely on scroll event and position.

[NiNJAD3vel0per]

@orizens
that's correct! other libraries including this one use the scroll event/position strategy unlike CDK-virtual.
CDK-virtual is a good way to go for a high performance scrolling with tons of elements.
but, as I look into it, it seems like it is quite difficult to customize to scroll multiple grid columns over the network like masonry style. IDK, in the future, whether it evolves for the multi purpose or not.
I am going to use this library for my project; Thank you :) this is a great work !

You think this library will work well with Angular8's new Ivy engine as well?

[orizens]

@NiNJAD3vel0per ng8 - havn't checked that. shouldn't be an issue.

[eddyzhu1980]

I have two items on one column. Can you please advise how to configure it? or it works automatically?

[eng-dibo]

wrap all items with a div and wrap the outer div with cdk/scrolling

for example:

  <cdk-virtual-scroll-viewport itemSize="20" style="height:500vh">
    <div class="outer">
        <div class="column"">
             <div class="item"></div>
             <div class="item"></div>
             <div class="item"></div>
       </div>
        <div class="column"">
             <div class="item"></div>
             <div class="item"></div>
             <div class="item"></div>
       </div>
    </div>
  </cdk-virtual-scroll-viewport>