Infinite-scroll TS compile error

[Peter Alexay]

Discussed in #230

^{Originally posted by Hintalo February 14, 2022}
Hi Shlomi,

First I say thank you for your great NGrid library.
As I tried to implement a small demo-app with Infinite-scrolling, the TS compiler reported following error:

Error in template:

error TS2322: Type 'PblInfiniteScrollDataSource<Person, Person[]>' is not assignable to type 'PblDataSource<Person, any, PblDataSourceTriggerChangedEvent<any>, PblDataSourceAdapter<Person, any, PblDataSourceTriggerChangedEvent<any>>> | DataSourceOf<...>'.

Then I tried to simplify my component but the error has not disappeared.
I have taken the demo-app from your Infinite-Scroll documentation, as a starting point. My demo-component is even shorter, it is very minimalistic, but the error is still there:

import {Observable, Subscriber} from 'rxjs';
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { columnFactory } from '@pebula/ngrid';
import {createInfiniteScrollDS, PblInfiniteScrollTriggerChangedEvent} from '@pebula/ngrid/infinite-scroll';
import {
  PblInfiniteScrollDataSource
} from "@pebula/ngrid/infinite-scroll/lib/infinite-scroll-data-source/infinite-scroll-datasource";

export interface Person {
  id: number;
  name: string;
  gender: string;
  birthdate: number;
}

@Component({
  selector: 'infinite-scroll-component',
  templateUrl: './infinite-scroll.component.html',
  styleUrls: [],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InfiniteScrollComponent {

  public columns = columnFactory()
    .table(
      { prop: 'id', width: '100px', pIndex: true },
      { prop: 'name', width: '100px' },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', width: '25%' },
    )
    .build();

  public ds: PblInfiniteScrollDataSource<Person, Person[]> = createInfiniteScrollDS<Person>()
    .withInfiniteScrollOptions({
      blockSize: 100,
      initialVirtualSize: 100,
    })
    .withCacheOptions('sequenceBlocks')
    .onTrigger((event: PblInfiniteScrollTriggerChangedEvent<Person[]>) => {
      if (event.isInitial) {
        this.ds.setCacheSize(200 * 4);
        return [] as Person[];
      } else {
        console.log(event.fromRow, event.toRow);
        return [] as Person[];
      }
    })
    .create();

  constructor() { }
}

The template code is also a copy of the infinite-scroll example:

<pbl-ngrid [dataSource]="ds" [columns]="columns">
  <!--mat-progress-bar *ngIf="ds.adapter.virtualRowsLoading | async" mode="indeterminate"></mat-progress-bar-->
</pbl-ngrid>

Could you please give some hint, was could be wrong with this component.
I'm using NGrid 4.0.0 with Angular 12.2.16 and Typescript 4.3.5 in my project (which was created using Angualr CLI).

Thank you,
Peter