In mat-paginator pageSizeOptions is not working

1. I am working on Angular Project using Angular Material .
2. I am trying yo Show data in table view , Using Pagination because of lot of data .
3. Problem is pageSizeOptions option of pagination is not working with table .
4. 
   Although template displays the Next , previous button but they are working
   
   I am sharing my code
   

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { CustomerService } from '../_service/customer/customer.service';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import { MatSort } from '@angular/material';


@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {
customerData : any = [];
addCustomer : boolean = false;
displayedColumns: string[] = ['customerName', 'customerPhone', 'customerEmail', 'created_at'];
dataSource : any;

length: number;
pageSize: number=1;
pageSizeOptions = "[5, 10, 25, 100]";

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;

constructor(public rest : CustomerService) { }

ngOnInit() {
this.getCustomer();

}

getCustomer() {

this.rest.getCustomers(localStorage.getItem('currentUser')).subscribe(result => {
if(result['status'] == 1){
this.customerData = result['value'];
this.dataSource = new MatTableDataSource(this.customerData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
console.log(this.customerData)})
}


applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();

if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}


app.component.html

<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" MatSort>

<!-- Position Column -->
<ng-container matColumnDef="customerName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Customer Name </th>
<td mat-cell *matCellDef="let row"> {{row.customerName}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="customerPhone">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Phone Number </th>
<td mat-cell *matCellDef="let row"> {{row.customerPhone}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="customerEmail">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Eamil </th>
<td mat-cell *matCellDef="let row"> {{row.customerEmail}} </td>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="created_at">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Added on </th>
<td mat-cell *matCellDef="let row"> {{row.created_at}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Continue reading...