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.

score 1 · Answer 1 · answered Apr 19 '19 at 15:55

1

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

answered Apr 19 '19 at 15:55

Exocomp

1,477
2
20
29

it still not possible to do this? – C Alonso C Ortega Mar 17 '20 at 02:39
In the github issue @speige mentioned a possible solution with CSS, have you been able to do it? – C Alonso C Ortega Mar 17 '20 at 02:41

Angular virtual scroll with bootstrap responsive design

1 Answers1