infinite list scroll

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -1,6 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import { MatSort, MatSortable, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Layer } from 'src/app/models/layer.model';
@@ -9,33 +8,49 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
-import { NotificationsService } from 'src/app/services/notifications.service';
 
 @Component({
     selector: 'app-layers-list',
     templateUrl: './layers-list.component.html',
     styleUrls: ['./layers-list.component.scss'],
     standalone: true,
-    imports: [MatGridListModule, MatButtonModule, RouterLink, MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule]
+    imports: [MatGridListModule, MatButtonModule, RouterLink, MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule]
 })
 export class LayersListComponent implements OnInit {
   displayedColumns = ['number', 'name', 'source'];
   dataSource!: MatTableDataSource<Layer>;
 
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
 
+  start: number = 0;
+  limit: number = 50;
+  end: number = this.limit + this.start;
+  loadingInProgress: boolean = false;
+
   constructor(
     private _http: HttpClient,
   ) { }
 
+  @HostListener('document:scroll', ['$event'])
+  public async  onScroll(event: any) {
+    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 1 && !this.loadingInProgress) {
+      this.loadingInProgress = true;
+      let data: Layer[] = await Layer.getList(this._http, this.start, this.limit);
+      this.dataSource.data = this.dataSource.data.concat(data);
+      this.start = this.end;
+      this.end = this.limit + this.start;
+      setTimeout(() => {
+        this.loadingInProgress = false;
+      }, 500);
+    }
+  }
   async ngOnInit() {
-    this.dataSource = new MatTableDataSource(await Layer.getList(this._http));
-    this.dataSource.paginator = this.paginator;
+    this.dataSource = new MatTableDataSource(await Layer.getList(this._http, this.start, this.limit));
     this.dataSource.sort = this.sort;
     this.dataSource.sort.sort({ id: 'number', start: 'desc' } as MatSortable);
+    this.start = this.end;
+    this.end = this.limit + this.start;
   }
-
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter =  filterValue.trim().toLowerCase();
@@ -44,3 +59,4 @@ export class LayersListComponent implements OnInit {
     return item.id;
   }
 }
+