CODEWITHSUNDEEP
angularangular-cdk
Murhaf Sousli
Murhaf Sousli

Reputation: 13296

Angular CDK virtual-scroll infinite loop

I am trying to implement an infinite loop scroll for a list of items using the CDK virtual-scroll

I reached a point where I gave up. I cannot make it happen, how can I achieve this the CDK virtual-scroll?

Here is my code

import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
   <ng-container *ngIf="infinite | async; let items">

     <cdk-virtual-scroll-viewport itemSize="50" 
                                  (scrolledIndexChange)="nextBatch($event, (items[items.length - 1].index))">
       <div *cdkVirtualFor="let item of items; trackBy: trackByIdx">{{item}}</div>
     </cdk-virtual-scroll-viewport>

   </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  arr = Array.from({ length: 10 }).map((_, i) => `Item #${i}`);

  offset = new BehaviorSubject<any>({ offset: 0 });
  infinite: Observable<any[]>;

  @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;


  constructor() {
    this.infinite = this.offset.pipe(
      map((n: any) => this.getBatch(n)),
    );
  }

  getBatch({ offset, loadPrev, loadNext, e }) {
    let arr = [...this.arr];
    if (loadPrev) {
      const last = arr[arr.length - 1];
      return [last, ...arr];
    }
    if (loadNext) {
      const first = arr[0];
      return [...arr, first];
    }
    return arr;
  }

  nextBatch(e, offset) {
    const end = this.viewPort.getRenderedRange().end;
    const start = this.viewPort.getRenderedRange().start;
    const total = this.viewPort.getDataLength();

    if (start === 0) {
      this.offset.next({ offset: offset, loadPrev: true, e });
    }

    if (end === total) {
      this.offset.next({ offset: offset, loadNext: true, e });
    }
  }

  trackByIdx(i) {
    return i;
  }
}

Live stackblitz

Upvotes: 4

Views: 8350

Answers (2)

Learning
Learning

Reputation: 1413

We just need to check if the scroll is scrolled till the last item and then scroll back to the first item. For example:

app.component.html

<cdk-virtual-scroll-viewport class="example-viewport" [itemSize]="itemSize" (scrolledIndexChange)="onScroll($event)">
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

app.component.ts

items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
itemSize = 5;
@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

onScroll(event) {
    console.log(event);
    if( event >= ((this.items.length-this.itemSize-1)*10) ) {
      this.viewPort.scrollToIndex(0);
    }
}

https://angular-utnzft.stackblitz.io

Upvotes: 2

Muhammad Kamran
Muhammad Kamran

Reputation: 1027

The cdk-virtual-scroll-viewport must have a height and the items it loops over should also have a fixed height. The component needs this information to calculate when an item should be rendered or removed.

E.g

cdk-virtual-scroll-viewport {
  height: 100vh;

  li {
    height: 100px;
  }
}

Upvotes: 0

Related Questions