Angular Material 18 - Mat-paginator [length] issue

I have a problem with the mat-paginator component.


displayedColumns: string[] = ['id', 'name'];
dataSource = new MatTableDataSource<any>();
totalItems = 0;

@ViewChild(MatPaginator) paginator!: MatPaginator;

constructor(private colorService: ColorsHttpService, private cdr: ChangeDetectorRef) {}

ngOnInit(): void {
this.dataSource.paginator = this.paginator;

this.loadData(1, 10);
}

loadData(pageNumber: number, pageSize: number) {
this.colorService.getColors(pageNumber, pageSize).subscribe(response => {
this.paginator.length = response.paging.totalRows;
this.dataSource.data = response.items;
this.totalItems = response.paging.totalItems;
this.paginator.pageIndex = response.paging.pageNumber - 1;
this.paginator.length = response.paging.totalRows;

this.cdr.detectChanges();
});
}

onPageChange(event: any) {
this.loadData(event.pageIndex + 1, event.pageSize);
}

<mat-paginator [length]="totalItems"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
(page)="onPageChange($event)">
</mat-paginator>

I set the number of items in the component, but in the view I see that the number of items is 0.

However, when I try to change manualy (using UI) the page size (without page refreshing), the data starts showing correctly and paging works perfectly.

What could be the cause? Why is mat-paginator not initializing correctly?

Continue reading...