Angular Material Paginator doesn't display all pageSizeOptions

When I click on the select element, nothing happens, even though the options should appear. They don't appear in DevTools either.

<mat-paginator
[length]="totalApplications"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
showFirstLastButtons="true"
(page)="onPageChange($event)">
</mat-paginator>


dataSource: any[] = [];
totalApplications = this.fullData.length;
pageSizeOptions = [10, 20, 50];
pageSize = 20;
currentPage = 0;

@ViewChild(MatPaginator) paginator!: MatPaginator;

ngOnInit(): void {
this.updatePageData();
}

onPageChange(event: any): void {
this.currentPage = event.pageIndex;
this.pageSize = event.pageSize;
this.updatePageData();
}

updatePageData(): void {
const startIndex = this.currentPage * this.pageSize;
const endIndex = startIndex + this.pageSize;
this.dataSource = this.fullData.slice(startIndex, endIndex);
}


I added these styles to check if the select options are maybe overridden by other elements, but still, nothing changed.

mat-paginator {
display: block !important;
background-color: #fff !important;
}

Continue reading...