alfresco-ng2-components/docs/content-services/components/infinite-scroll-datasource.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Infinite Scroll Datasource	v6.6.0	Active	2024-01-15

Infinite Scroll Datasource

Contains abstract class acting as a baseline for various datasources for infinite scrolls.

Basic Usage

First step to use infinite scroll datasource in any component is creating a datasource class extending InfiniteScrollDatasource using specific source of data e.g. one of the content endpoints.

export class VersionListDataSource extends InfiniteScrollDatasource<VersionEntry> {
    constructor(private versionsApi: VersionsApi, private node: Node) {
        super();
    }

    getNextBatch(pagingOptions: ContentPagingQuery): Observable<VersionEntry[]> {
        return from(this.versionsApi.listVersionHistory(this.node.id, pagingOptions)).pipe(
            take(1),
            map((versionPaging) => versionPaging.list.entries)
        );
    }
}

Then in component that will have the infinite scroll define the datasource as instance of a class created in previous step, optionally you can set custom size of the items batch or listen to loading state changes:

this.versionsDataSource = new VersionListDataSource(this.versionsApi, this.node);
this.versionsDataSource.batchSize = 50;
this.versionsDataSource.isLoading.pipe(takeUntil(this.onDestroy$)).subscribe((isLoading) => this.isLoading = isLoading);

Final step is to add the CdkVirtualScrollViewport with CdkVirtualFor loop displaying items from the datasource.

<cdk-virtual-scroll-viewport appendOnly itemSize="88">
    <div *cdkVirtualFor="let version of versionsDataSource"></div>
</cdk-virtual-scroll-viewport>

When user will scroll down to the bottom of the list next batch of items will be fetched until all items are visible.

Class members

Properties

Name	Type	Default value	Description
batchSize	number	100	Determines how much items will be fetched within one batch.
firstItem	T		Returns the first item ever fetched.
isLoading	Observable<boolean>		Observable representing the state of loading the first batch.
itemsCount	number		Number of items fetched so far.

Methods

• connect(collectionViewer: CollectionViewer): Observable<T>
  Called by the virtual scroll viewport to receive a stream that emits the data array that should be rendered.
  • collectionViewer:_ CollectionViewer - collection viewer providing view changes that are listened to so that next batch can be fetched
  • Returns Observable<T> - Data stream containing fetched items.
• disconnect(): void
  Called when viewport is destroyed, disconnects the datasource, unsubscribes from the view changes.
• reset(): void
  Resets the datasource by fetching the first batch.