This is what my mat-paginator
looks like:
<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="100"></mat-paginator>
Basically I'm trying to implement a typical pagination idea: the server does not return all the data, it returns a chunk of it and then when a new page is opened it goes for another fraction of data. In order to do that, I need to let the paginator know how many items are there in the database, that's to say, I need to provide it with the length
prop.
I tried setting it in a variety of ways, directly like in the line above or inside the method where I make a get request. Like this:
this.paginator.length = 100;
Indeed the length should come from the server but for the time being for debug purposes I simply hardcode it.
this.dataSourceService.findAll().subscribe(
records => {
this.paginator.length = 100;
this.dataSource.data = records.map(
record => new Record().deserialize(record)
)
}
)
Still the length value I get on the client is equal to the number of items contained in the array I get in the server response.
What am I doing wrong and why the length value is not set to 100.
EDIT:
Alright, here is some more relevant code.
Inside the component I do the following:
dataSource = new MatTableDataSource<Record>();
pageSizeOptions: number[] = [5, 10, 20];
inside the OnInit()
I also have the following line: this.dataSource.paginator = this.paginator;
I'm using it like this
<mat-paginator
[pageSize]="pageSize"
[pageIndex]="pageNumber-1"
[pageSizeOptions]="[10, 25, 50, 100]"
[length]="itemCount"
(page)="changePaging($event)"
>
lets say that the return of your observable is an object { list: [], count: xx } count is the total items (without pagination)
this.list$ = this.dataSourceService
.findAll()
.pipe(tap(r => (this.itemCount = r.count)));
of course you can subscribe after that for more actions...
check the docs also https://material.angular.io/components/paginator/api