I am currently working on an Angular 7 application that utilizes Mat Tables to retrieve data from an API. I have implemented dynamic pagination values, where the pageSizeOptions value changes based on a dropdown selection when loading the grid. By default, all records are displayed.
For example, if the API returns 23 records, then the pageSizeOptions will include 10, 20, 23, 30, 40, and 50 with all 23 records displayed initially. However, if the API later returns 45 records, the grid still displays only 23 records even though the pageSizeOptions now includes 10, 20, 30, 40, 45, and 50, showing 45 as selected.
I believe this issue occurs because the View/Grid is loaded before the pageSizeOptions value is assigned, as the API takes some time to return data. I am considering implementing Observables/subscriptions to address this problem.
However, I am unsure of how to implement these for pageSizeOptions. Can anyone provide guidance on resolving this issue?
let gridData = responseStudents.Students.map(item => new ResponseStudents());
this.myDataSource = new MatTableDataSource(gridData);
this.Count = gridData.length;
this.PageSizeOptions = [this.Count, 5, 10, 25, 100, 500];
//To remove duplicate
this.PageSizeOptions = Array.from(this.PageSizeOptions.reduce((m, t) => m.set(t, t), new Map()).values());