I'm facing an issue while trying to implement pagination using mat-paginator in Angular for my table. Despite following the instructions from the Angular documentation, the entire table is getting loaded on the first page.
I attempted the following solutions:
setTimeout(() => this.tableDataSource.paginator = this.paginator);
and
ngAfterViewInit() {
this.tableDataSource.paginator = this.paginator;
}
Below is my component setup:
[...]
displayedColumns: string[] = ['BookTitulo', 'BookAutor', 'BookGenero'];
data: Book[];
tableDataSource = new MatTableDataSource<Book>(this.data);
isLoadingResults = true;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private api: ApiService) { }
ngOnInit() {
this.api.getBooks()
.subscribe(res => {
this.data = res;
console.log(this.data);
this.tableDataSource = new MatTableDataSource<Book>(this.data);
this.isLoadingResults = false;
}, err => {
console.log(err);
this.isLoadingResults = false;
});
}
[...]
And here is the table structure:
[...]
<table mat-table [dataSource]="tableDataSource" class="example-table"
matSort matSortActive="BookTitulo" matSortDisableClear matSortDirection="asc">
<!-- Book Name Column -->
<ng-container matColumnDef="BookTitulo">
<th mat-header-cell *matHeaderCellDef>Titulo</th>
<td mat-cell *matCellDef="let row">{{row.BookTitulo}}</td>
</ng-container>
<!-- Book Author Column -->
<ng-container matColumnDef="BookAutor">
<th mat-header-cell *matHeaderCellDef>Autor</th>
<td mat-cell *matCellDef="let row">{{row.BookAutor}}</td>
</ng-container>
<!-- Book Genre Column -->
<ng-container matColumnDef="BookGenero">
<th mat-header-cell *matHeaderCellDef>Genero</th>
<td mat-cell *matCellDef="let row">{{row.BookGenero}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/book-details/', row._id]"></tr>
</table>
<mat-paginator [pageSizeOptions]="[2, 3, 5]" showFirstLastButtons></mat-paginator>
[...]
I have tried various suggestions from other posts without success. Any help or suggestions would be greatly appreciated. Thank you for your time.