3

Is it possible to use Angular Material's <cdk-virtual-scroll-viewport> when you have multiple items in one line (display: inline-block; vertical-align: top;)?

For me the CDK renders only 3-2 items per line, with lots of space left on the right. I have set itemSize to the height of one item and the viewport's width to 100%.

Christopher Peisert
  • 21,862
  • 3
  • 86
  • 117
Phil
  • 7,065
  • 8
  • 49
  • 91
  • I think Angular Material Scrolling still doesn't support multi-column. I tried it myself and got frustrated. Check this out: https://stackoverflow.com/questions/53477373/cdk-virtualscroll-with-mat-grid-list – Sebastian Münster Aug 13 '19 at 11:32

1 Answers1

2

If you want to use a different library to achieve this functionality, then you can try - ngx-virtual-scroller

You can achieve the same functionality using Angular Scroll CDK with a little bit of code. I got my inspiration from this post - https://groups.google.com/g/angular/c/dAW9-Svq-o4?pli=1

But the function can be a little bit easier than suggested in the above blog

/* Function to convert single array into Array of array */
generateDataChunk(data,chunk=3) {
    let index: number;
    let dataChunk: [][] = [];
    for (index = 0; index < data.length; index += chunk) {
      dataChunk.push(data.slice(index, index + chunk));
    }
    return dataChunk;
  }

itemSet = generateDataChunk(itemData);

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let items of itemSet" class="example-item">
    <div class="example-sub-item" *ngFor="let item of items">{{item}}</div>
  </div>
</cdk-virtual-scroll-viewport>

This will achieve the functionality.

Likhith Kolayari
  • 154
  • 7