I am mounting a table, with pagination. And I have the problem that, as the api is paginated , when I navigate through the buttons of the table, mat-paginator
when it reaches the end of the elements that have the data-source
of the table, it disables the buttons and I cannot continue.
I detail about code.
I receive the following model from the API
{
"content": [{},{}
],
"pageable": {
"sort": {
"sorted": false,
"unsorted": true,
"empty": true
},
"offset": 0,
"pageNumber": 0,
"pageSize": 50,
"paged": true,
"unpaged": false
},
"totalPages": 3,
"totalElements": 119,
"last": false,
"size": 50,
"number": 0,
"sort": {
"sorted": false,
"unsorted": true,
"empty": true
},
"numberOfElements": 50,
"first": true,
"empty": false
}
As you can see, the model tells me that I have 119 total elements, but that only 50 will be returned to me. Therefore, these 50 (which are contained in the content
) are the ones that I bind to thedata-source
I have been looking at the Angular Material documentation and I see that it does have methods to know if the button is disabled, but not to enable it.
To make it clear, the buttons I refer to are the following
Any idea how to fix this?
I assume you used normal Angular Material pagination, that's why it only shows you the first 50 records.
In the Angular Material documentation: Angular Material Tables
In the examples there is a specific one that can help you in your case:
In the same way, there is the link to Stackblitz with an Example