ipsos-components/src/material-examples/paginator-configurable/paginator-configurable-example.html

Material Design components for Angular

<mat-form-field>
  List length:
  <input matInput [(ngModel)]="length">
</mat-form-field>

<mat-form-field>
  Page size:
  <input matInput [(ngModel)]="pageSize">
</mat-form-field>
<mat-form-field>
  Page size options:
  <input matInput
         [ngModel]="pageSizeOptions"
         (ngModelChange)="setPageSizeOptions($event)">
</mat-form-field>

<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = $event">
</mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>