title: how to add a pagination component to a table in angular?
body: <p>I am new to angular, and I tried to create a table with pagination. I want to add a pagination component to that table, but my code did not work correctly. The problem is, the number of items which is displayed on the table did not change when I changed the "item per page". Can anyone help me to find the problem?</p>
  
  <p>table.component.ts:</p>
  
  <pre><code>import { Component, OnInit, ViewChild, Input } from '@angular/core';
  import { MatSort, MatTableDataSource } from '@angular/material';
  import { PaginationComponent } from '../pagination/pagination.component';
  import {PageEvent} from '@angular/material';
  
  
  
  export interface Student {
    firstName: string;
    position: number;
    mathScore: number;
    lastName: string;
  }
  
  const arrayOfStudents: Student[] = [
    { position: 1, firstName: 'Sarah', lastName: 'Williams', mathScore: 12},
    { position: 2, firstName: 'Peter', lastName: 'Jones', mathScore: 15.5},
    { position: 3, firstName: 'Susan', lastName: 'Anderson', mathScore: 18},
    { position: 4, firstName: 'Jack', lastName: 'Green', mathScore: 14},
    { position: 5, firstName: 'Emma', lastName: 'Smith', mathScore: 20},
    { position: 6, firstName: 'Linda', lastName: 'Johnson', mathScore: 13},
    { position: 7, firstName: 'Robert', lastName: 'Brown', mathScore: 11.75},
    { position: 8, firstName: 'Michael', lastName: 'Miller', mathScore: 17},
    { position: 9, firstName: 'Elizabeth', lastName: 'Lopez', mathScore: 17.5},
    { position: 10, firstName: 'Frank', lastName: 'Thomas', mathScore: 19}
  ];
  
  @Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.css']
  })
  export class TableComponent  implements OnInit {
  
    displayedColumns: string[] = ['position', 'firstName', 'lastName', 'mathScore'];
    dataSource = new MatTableDataSource&lt;Student&gt;(arrayOfStudents);
    @ViewChild(MatSort) sort: MatSort;
    @ViewChild( PaginationComponent ) 
    private paginationComponent:PaginationComponent;
    @Input() length: 100;
    @Input() pageSize: 5;
    @Input() pageSizeOptions: [5, 10, 25, 100];
    @Input() pageEvent: PageEvent;
  
    setPageSizeOptions(setPageSizeOptionsInput: string) {
      this.paginationComponent.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str =&gt; +str);
    }
  
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
    }
  
    ngOnInit() {
      this.dataSource.sort = this.sort;
    }
  
  }
  </code></pre>
  
  <p>table.component.html:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
  &lt;/mat-form-field&gt;
  
  &lt;div class="mat-elevation-z8"&gt;
    &lt;table mat-table [dataSource] = "dataSource" matSort&gt;
  
        &lt;!-- Position Column --&gt;
      &lt;ng-container matColumnDef="position"&gt;
          &lt;th mat-header-cell *matHeaderCellDef  mat-sort-header&gt; No. &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
        &lt;!-- First Name Column --&gt;
      &lt;ng-container matColumnDef="firstName"&gt;
        &lt;th mat-header-cell *matHeaderCellDef  mat-sort-header&gt; First Name &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.firstName}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
        &lt;!-- Last Name Column --&gt;
      &lt;ng-container matColumnDef="lastName"&gt;
        &lt;th mat-header-cell *matHeaderCellDef  mat-sort-header&gt; Last Name &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.lastName}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
        &lt;!-- Math Score Column --&gt;
      &lt;ng-container matColumnDef="mathScore"&gt;
        &lt;th mat-header-cell *matHeaderCellDef  mat-sort-header&gt; Math Score &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.mathScore}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;app-pagination (pageSizeOptions)='setPageSizeOptions($event)' &gt;&lt;/app-pagination&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>pagination.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {PageEvent} from '@angular/material';
  
  @Component({
    selector: 'app-pagination',
    templateUrl: './pagination.component.html',
    styleUrls: ['./pagination.component.css']
  })
  export class PaginationComponent implements OnInit {
  
    // MatPaginator Inputs
    length = 100;
    pageSize = 5;
    pageSizeOptions = [5, 10, 25, 100];
  
    // MatPaginator Output
    pageEvent: PageEvent;
  
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>pagination.component.html:</p>
  
  <pre><code>&lt;mat-paginator [length]="length"
                [pageSize]="pageSize"
                [pageSizeOptions]="pageSizeOptions"
                (page)="pageEvent = $event"&gt;
  &lt;/mat-paginator&gt;
  
  &lt;div *ngIf="pageEvent"&gt;
    &lt;h5&gt;Page Change Event Properties&lt;/h5&gt;
    &lt;div&gt;List length: {{pageEvent.length}}&lt;/div&gt;
    &lt;div&gt;Page size: {{pageEvent.pageSize}}&lt;/div&gt;
    &lt;div&gt;Page index: {{pageEvent.pageIndex}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>