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

It is under development. see https://github.com/angular/components/issues/10113 — ronenmiller, Jun 18 '19 at 07:36
Please have a look here - https://stackblitz.com/edit/cdk-virtual-scroll-simple-autosize — Shrinivas, Nov 16 '19 at 16:43

Dionis Oros · Answer 1 · 2020-12-20T21:02:24.923

3

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%">

edited Dec 20 '20 at 21:02

answered Dec 20 '20 at 20:14

Dionis Oros

455
5
8

1

I think you need both the stable and experimental module imported: import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'; import { ScrollingModule } from '@angular/cdk/scrolling'; imports: [ScrollingModule, ExperimentalScrollingModule] – Preda7or Apr 15 '21 at 10:20

score 1 · Answer 2 · answered Jan 30 '20 at 19:04

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

score 0 · Answer 3 · answered Jan 14 '19 at 11:12

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.

score 0 · Answer 4 · answered Jun 29 '20 at 16:46

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 }"
      >

score 0 · Answer 5 · answered Sep 24 '20 at 20:20

0

This CSS works for me. No fixed height required:

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

.viewport { 
   display: contents;
}

answered Sep 24 '20 at 20:20

Rinkesh Patel

1
1

1

Welcome to Stack Overflow. Before you paste this in even more locations, please take the time to read [Is it acceptable to add a duplicate answer to several questions?](https://meta.stackexchange.com/questions/104227/is-it-acceptable-to-add-a-duplicate-answer-to-several-questions). – fcdt Sep 24 '20 at 20:44

cdk-virtual-scroll-viewport with variable item heights

5 Answers5