cdk-virtual-scroll-viewport with variable item heights

user_272180 0
Viewed 23957

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

virtualscroll angular7 angular
7 Answers

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

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

This CSS works for me. No fixed height required:

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

.viewport { 
   display: contents;
}
user_58041740
user_87578830

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.

user_105459330

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;
}
user_28097490

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