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

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();
  }
}