[virtual-scroll]: collectionViewer.viewChange is emitted only after the observable returned from DataSource#connect has been emitted once

[kimamula]

What is the expected behavior?

The following implementation of DataSource#connect should work.

connect(collectionViewer: CollectionViewer): Observable<ProjectListItem[]> {
  return collectionViewer.viewChange.pipe(
    switchMap(({ start, end }) => this.fetchData(start, end))
  );
}

What is the current behavior?

The above code does not work while the following works.

connect(collectionViewer: CollectionViewer): Observable<ProjectListItem[]> {
  return collectionViewer.viewChange.pipe(
    startWith({ start: 0, end: 0 }), // add this line
    switchMap(({ start, end }) => this.fetchData(start, end))
  );
}

IMO this behavior is really confusing.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-nzrgbv?file=app%2Fcdk-virtual-scroll-data-source-example.ts

[jelbourn]

@kimamula can you clarify why you believe it should work that way?

[kimamula]

interface CollectionViewer {
  viewChange: Observable<{ start: number; end: number; }>;
}

connect(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>>;

This connect() interface tells one that it should "return new observable by observing the observable passed as the argument".
However, it is hard to imagine that in fact the returning observable locates more upstream than the passed observable in the initial data flow.
The situation is completely opposite to what many people would naturally imagine by looking at the interface.

[kimamula]

connect() is required to provide two kinds of data.

1. Initial data
   • Despite an observable is passed as an argument, this data must not be emitted in response to that observable. Instead, this should be emitted prior to the first emission of the passed observable, which is hard to imagine.
2. Subsequent data in response to scrolling

To clarify its requirements, its interface should have been something like

connect(): {
  observeScroll(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>>;
  initialData: Observable<T[] | ReadonlyArray<T>>;
};

or

connect(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>>;
getInitialData(): Observable<T[] | ReadonlyArray<T>>;

[kimamula]

You don't need startWith() when you are using DataSource with mat-table.

https://stackblitz.com/edit/angular-7ixetg?file=app%2Ftable-basic-example.ts