I am using an angular material Table and paginator. I want to send pageSize and pageIndex to the BE so I can do paging from BE, cause we have massive data and its not possible in FE. how can I subscribe on pageSize change and PageIndex changes and get those selected numbers by the user to send to the BE.
You can subscribe to the pager as follows:
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
],
})
export class ListComponent implements AfterViewInit {
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
data: MatTableDataSource<any>;
constructor(private http: HttpClient) {}
ngAfterViewInit(): void {
this.data = new MatTableDataSource([]);
this.data.paginator = this.paginator;
this.paginator.pageIndex = 0;
this.paginator.page.pipe(
startWith({}),
switchMap(() => {
const page = this.paginator.pageIndex + 1;
const itemsPerPage = this.paginator.pageSize;
return this.http.get(`api_url?page=${page}&itemsPerPage=${itemsPerPage}`);
}),
map((apiResponseData) => { return apiResponseData;}),
).subscribe((data) => {
this.data= new MatTableDataSource(data);
this.data._updateChangeSubscription();
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.