How can I use infinite-scroll in combination with mat-table and service in Angular 7?

Question

I am having trouble using infinite-scroll within my mat-table. I get the data with the table.service.ts class from the backend. How can I use the Infinite scroll functionality within my spreadsheet so that more and more content is automatically displayed when I scroll down.

Window - Angular 7. I use Material Table.

liste.component.ts

private load() {
    const liste_sub = this.liste_Service.loadListe('001', 0, LIST_SIZE).subscribe(
      liste=> {
        this.dataSource.data = liste;
      },
      (err: HttpErrorResponse) => {
        // onError()-Rumpf
        this.handleHttpError(err);
      });
    this.subscription.add(liste_sub);
  }

liste.service.ts

  public loadListe(from: number, size: number): Observable<Liste[]> {
    if (!this.cache$ || this.from_cashe$ !== from || this.size_cashe$ !== size) {
      this.from_cashe$ = from;
      this.size_cashe$ = size;
      this.cache$ = this.doRequest(from, size).pipe(
        shareReplay(CACHE_SIZE)
      );
    }
    return this.cache$;
  }

  private doRequest(from: number, size: number): Observable<Liste[]> {
    const params  = new HttpParams().append('from', from.toString()).append('size', size.toString());
    const url = this.API_URL.replace(':vertragsnummer', vertragsnummer);
    const httpOptions = { headers, params };
    return this.httpClient.get<Liste[]>(url, httpOptions);
  }

liste.component.html

<table mat-table [dataSource]="dataSource">
....

</table>

I would like to add virtual scrolling into my table. It should load as much contents as the size of the page. If the user is scrolling down it should load and show further contents. In that case the die page is getting longer. The scrollbar should not be shown inside the table. So no additional scrollbar.

Answer 1

I hope this would help you.

Infinite scrolling isnt working well with mat-table, though it can be achieved without using the infinite scroll module or cdk-virtual-scrolling.

To read more about this https://github.com/angular/components/issues/9858