Angular virtual scroll with bootstrap responsive design

Question

How would I set up Angular virtual scroll with bootstraps responsive design?

For example:

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 col-6" *ngFor="let item of items; let i = index">
        <img src="{{item.url}}">
    </div>
</div>

So basically image are loaded horizontally next to each other and wrap down the viewport and resizing the viewport will change the size of columns.

I found ngx-virtual-scroller (https://github.com/rintoj/ngx-virtual-scroller/issues/321) and also cdk scrolling (https://material.angular.io/cdk/scrolling/overview) but it seems they require each item to be on a single row.

Answer 1

ngx-virtual-scroller does support horizontal elements. See here.