8

Is there a virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it.

I'm using the grid-list to display profile pictures, and need an infinite scroll or preferably virtual scroll to load new ones.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Elger Mensonides
  • 6,930
  • 6
  • 46
  • 69

1 Answers1

10

So since cdk virtualscroll doesn't support multi column, I ended up using ngx-virtual-scroller, which does support multi-columns. The mat-grid-list I also had to let go because of this, but, creating your own tiles isn't that much work when using flexbox.

Here's a snippet using multi columns, [users-online-tile] is a component that represents a user-picture with a name. The IsHandset boolean (from cdk) I use to set the height of the tile so more or less tiles are displayed depending on the screen size.

Hope this helps someone

    <virtual-scroller [items]="users" (vsUpdate)="onVsUpdate($event)" (vsEnd)="fetchMore($event)"
      (vsChange)="onVsChange($event)" [scrollbarWidth]="20" [scrollbarHeight]="100" [bufferAmount]="100">
      <div [ngClass]="{ 'users-online-tile' :  (isHandset$ | async), 'users-online-tile-desktop' : !(isHandset$ | async) }" 
              *ngFor="let user of scrollItems">
        <div [users-online-tile]="user" [isHandset]="(isHandset$ | async)"></div>
        <!-- <div class="item">{{user.userName}}</div> -->
      </div>
    </virtual-scroller>
George C.
  • 6,574
  • 12
  • 55
  • 80
Elger Mensonides
  • 6,930
  • 6
  • 46
  • 69
  • Hi, How did you achieve the responsiveness like mat-grid-list? As in mat-grid-list, we can change the no of columns in one row. How did you do while using simple divs? Can you please guide me on it? – user3768904 Jan 06 '19 at 10:01
  • @user3768904 like I said in my answer: I use IsHandset (from cdk) to determine if the device is a handset or not. I pass that boolean to my 'users-online-tile' component. In the component I use a simple ngClass to alternate between handset height and desktop. This way, the amount of tiles displayed will be more or less. – Elger Mensonides Feb 08 '19 at 09:25
  • @ElgerMensonides is this still the only way of creating a scrollable grid? – pax Jun 03 '20 at 07:07
  • @PaxForce as far as I can tell yes unfortunately – Elger Mensonides Jun 03 '20 at 12:34
  • I tried this code, but it only displays a single coloumn – Sh eldeeb Mar 15 '22 at 14:48