cdk-virtual-scroll-viewport with variable item heights

Question

I would like to use cdk-virtual-scroll-viewport in a TimeLine view with items of different heights.

So setting itemSize="x" which, according to the documentation refers to The size of the items in the list (in pixels), is unpractical.

autosize is not yet available.

Is it possible at all to use virtual/endless scrolling with cdk-virtual-scroll-viewport vith variable item sizes?

Update

I was looking for alternative virtual/endless scrolling solutions and, I hardly can believe, it seems there is no solution which works with dynamic row height, even with https://github.com/rintoj/ngx-virtual-scroller it's not recommended.

Update 2, July 2019

Since meanwhile there is still no solution, I believe the "good enough" way to work around this would be to load a fixed number of items, and add a button to load more items at the bottom of the list, like in this example: https://stackblitz.com/edit/ang-mat-load-more

Answer 1

autosize works for me.

Try to install:

"@angular/cdk": "6.2.0",
"@angular/cdk-experimental": "6.2.0"

and then import ScrollingModule into your module:

import {ScrollingModule} from "@angular/cdk-experimental";

imports: [ScrollingModule]

then you can use autosize property like below:

 <cdk-virtual-scroll-viewport autosize style="height: 100%">

Answer 2

Finally I found the solution: In my case, I recently use @angular/cdk version 12.2.13 and so you should install too @angular/cdk-experimental with version 12.2.13 (the same version).

Go to app.module.ts: add this line:

import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';

and in imports:

[ScrollingModule,
    ExperimentalScrollingModule]

Then do this:

<cdk-virtual-scroll-viewport
          autosize
          style="height: 100%"
          class="container"
        >
your content
</cdk-virtual-scroll-viewport>

it worked for me.

Answer 3

Until this feature is offered in the CDK I got around it by listening to the onscroll event of the native element then respond when the scroll offset to the bottom is 0

@ViewChild(CdkVirtualScrollViewport, { static: false })
public virtualScrollViewport?: CdkVirtualScrollViewport;

...

ngAfterViewInit() {
  this.virtualScrollViewport.elementRef.nativeElement.onscroll = (e) => { this.onScroll(e) };
}

onScroll(e) {
  var scrollOffset = this.virtualScrollViewport.measureScrollOffset("bottom");

  if (scrollOffset == 0) {
    this.fetchMoreData();
  }
}

Answer 4

itemSize="x" doesn't help set the height... you'd have to use CSS to assign an arbitary height yourself.

• ref: virtual scroll on Angular 7 - the height is zero by default

coming to your question, variable item sizes should not be a problem with the virtual scroll... you can change the array in this example to see the possibility & results very quickly.

Answer 5

This CSS works for me. No fixed height required:

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}

Answer 6

The only thing that worked for me is the example of splaktar at stackblitz

Template:

<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="example- 
viewport">
<div *cdkVirtualFor="let item of items"
   [style.height]="itemSize + 'px'">{{item}}</div>
</cdk-virtual-scroll-viewport>
<br>
<div>
<label for="height">Item Size:</label>
<input id="height" type="number" [(ngModel)]="itemSize">
</div>

component:

import {ChangeDetectionStrategy, Component} from '@angular/core';

@Component({
selector: 'cdk-virtual-scroll-overview-example',
styleUrls: ['cdk-virtual-scroll-overview-example.css'],
templateUrl: 'cdk-virtual-scroll-overview-example.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
itemSize = 80;
}

Answer 7

It is possible to set cdkvirtualscrollviewport height dynamically with [ngStyle]

          <cdk-virtual-scroll-viewport
        itemSize="parent?.children.length"
        [ngStyle]="{'height.px': parent?.children.length<10? parent?.children.length*42 :250 }"
      >