I've upgraded my Angular project dependencies:
- @angular/core: ^14.2.9
- @angular/cdk: ^14.2.9
- @angular/material: ^14.2.6
- ngx-infinite-scroll: ~14.0.1
And after that, the infinite scroll (with virtualization) stopped working.
What I observed is that the cdk-virtual-scroll-viewport
does not add a scroll anymore if the scrollWindow
property is set to false
and the ngx-infinite-scroll
needs that property to be set to false
.
<cdk-virtual-scroll-viewport
*ngIf="items.length"
class="virtualScrollViewport"
itemSize="80"
minBufferPx="400"
maxBufferPx="600"
infiniteScroll
[infiniteScrollDistance]="1"
[infiniteScrollThrottle]="50"
[infiniteScrollDisabled]="loading || !loaded || !canLoadMoreItems"
[scrollWindow]="false"
(scrolled)="onScroll()"
>
<div><p class="text-bold">Available items</p></div>
<mat-card *cdkVirtualFor="let itemof items; trackBy: trackByFunction">
<mat-card-content>
...
</mat-card-content>
</mat-card>
<mat-progress-bar *ngIf="loading && items?.length" mode="indeterminate"></mat-progress-bar>
</cdk-virtual-scroll-viewport>
Now the scroll is not displayed anymore (.cdk-virtual-scrollable
class is not added anymore). Without the [scrollWindow]="false"
it is, but the infinite scroll is not working because based on their documentation this property is necessary. So, these two things go head to head.
Has anyone faced the same issue and found a workaround for this?