In Mat paginator pageOptions is not working

• I'm trying to show data in table view using mat pagination.
• The problem is [pageSizeOptions]="[5, 10, 25, 100]" is not working.
• Although, the next and previous are working perfectly.

Code:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { Router } from '@angular/router';
import {MatIconModule} from '@angular/material/icon';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule, MatSort} from '@angular/material/sort';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@Component({
selector: 'app-sample-view',
templateUrl: './sample-view.component.html',
styleUrls: ['./sample-view.component.scss']
})
export class SampleViewComponent implements OnInit {

displayedColumns: string[] = ['First_Name'];
@ViewChild(MatSort, {static: true}) sort: MatSort;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
dataSource: MatTableDataSource<any>;

constructor(private router: Router,private fsatternService){
}
display_pattern(){

this.fs.display_pattern(this.pattern).subscribe(
(data) => {
this.pattern = data.results;
this.dataSource = new MatTableDataSource(this.pattern);
this.dataSource.sort=this.sort;
setTimeout(() => this.dataSource.paginator = this.paginator);
console.log("Datasource:",this.dataSource)
},
err => {
console.error(err);
}

);

}

}


sample.component.html

<div class="mat-elevation-z8" id=test>
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="First_Name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.First_Name}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]" [length]="50" [pageSize]="5" showFirstLastButtons></mat-paginator>
</div>
</div>


items per page dropdown is not showing. I checked in the console when I click the dropdown. I'm getting this error. I'm using Angular 8.

What can I do to fix this?





Continue reading...