I'm currently developing an Angular 8 application using Clarity UI.
Within my app, I have implemented a datagrid with pagination. My challenge lies in fetching data after changing the number of items per page, as there is no output provided by the Clarity components for this action. The only output available is for changing pages.
Below is the HTML snippet that I am working with:
<clr-dg-footer>
<clr-dg-pagination #pagination [clrDgPageSize]="itemsPerPage" [clrDgTotalItems]="totalElements" [clrDgLastPage]="totalPages"
(clrDgPageChange)="onChangePage($event)">
<clr-dg-page-size [clrPageSizeOptions]="[5,20,50,100]" (change)="onItemsPerPageChange($event)">Vehicles per page</clr-dg-page-size>
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
of {{pagination.totalItems}} vehicles
</clr-dg-pagination>
</clr-dg-footer>
This is how I currently handle the item selection change:
onItemsPerPageChange(event) {
let newValue = +event.target.value.slice(3);
if(this.itemsPerPage !== newValue) {
this.itemsPerPage = newValue;
this.fetchCars();
}
}
While this approach gets the job done, I am aware that it may not be the most optimal solution.
If you have any suggestions on a better way to achieve this functionality, please share your ideas as I am currently stumped.