title: ngx-pagination click next page not working
body: <p>I've problem with pagination. When I try to click next page it does not work as expected. When I click on number to go next page it doesn't working either.</p>
  
  <p>I provided the code bellow and a <a href="https://stackblitz.com/edit/ngx-pagination-server-side-mockup-69bawa" rel="nofollow noreferrer">Demo</a> link for your reference.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table
        mat-table
        [dataSource]="dataSource"
        matSort
        multiTemplateDataRows
        class="mat-elevation-z8-"
      &gt;
      &lt;ng-container
          matColumnDef="{{ column }}"
          *ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }"
        &gt;&lt;!-- --&gt;
        &lt;ng-container *ngIf="column === 'select'; else notSelect"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;
            &lt;mat-checkbox (change)="$event ? masterToggle() : null"
                          [checked]="selection.hasValue() &amp;&amp; isAllSelected()"
                          [indeterminate]="selection.hasValue() &amp;&amp; !isAllSelected()"&gt;
            &lt;/mat-checkbox&gt;
          &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;
            &lt;mat-checkbox (click)="$event.stopPropagation()"
                          (change)="$event ? selection.toggle(row) : null"
                          [checked]="selection.isSelected(row)"
                          &gt;
            &lt;/mat-checkbox&gt;
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container *ngIf="column.length == 11"  matColumnDef="created_at"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;&lt;strong&gt;{{ column }}&lt;/strong&gt;&lt;/th&gt;
        &lt;/ng-container&gt;
        &lt;ng-container #headerSort&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;&lt;strong&gt;{{ column }}&lt;/strong&gt;&lt;/th&gt;
        &lt;/ng-container&gt;
  
          &lt;td
            mat-cell
            *matCellDef="let element; let i = index"
            (click)="open(element)"
            class="pointer"
          &gt;
            &lt;ng-container&gt;
              {{ element.created_at|date:'dd/MM/yyyy'}}
  
            &lt;/ng-container&gt;
  
              &lt;p *ngIf="column.length == 7"&gt;
            {{element.state}}
            &lt;/p&gt;
            &lt;p&gt;
                {{element.number}}
            &lt;/p&gt;
            &lt;p&gt;
            {{element.title}}
          &lt;/p&gt;
          &lt;/td&gt;
  
        &lt;/ng-container&gt;
  
       &lt;tr mat-header-row *matHeaderRowDef="columnsToDisplay"&gt;&lt;/tr&gt;
        &lt;tr
          mat-row
          *matRowDef="let element; columns: columnsToDisplay"
          class="example-element-row"
          [class.example-expanded-row]="expandedElement === element"
  
        &gt;&lt;/tr&gt;
  
      &lt;/table&gt;
      &lt;pagination-controls (pageChange)="getPage($event)" id="server" &gt;&lt;/pagination-controls&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import {ChangeDetectionStrategy, ViewChild, Input, Component } from '@angular/core';
      import {Observable, of} from 'rxjs';
      import { delay, map, tap } from 'rxjs/operators';
      import { MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatPaginator, MatSort, Sort } from '@angular/material';
      import {animate, state, style, transition, trigger} from '@angular/animations';
      import { SelectionModel } from '@angular/cdk/collections';
      import {HttpDatabase, GithubIssue} from './app.service';
  
      // interface IServerResponse {
      //     items: string[];
      //     total: number;
      // }
  
      @Component({
        selector: 'my-app',
        templateUrl: './app.component.html',
        styleUrls: [ './app.component.css' ],
        changeDetection: ChangeDetectionStrategy.OnPush
      })
      export class AppComponent  {
        data: any = [];
        selectedRowIds: string;
        element:string;
        columnsToDisplay: string[]  = ['Scoopy Name', 'Domain', 'Status', 'title'];
  
        selection = new SelectionModel&lt;GithubIssue&gt;(true, []);
        displayedColumns: string[] = ['created_at','number', 'state', 'title'];
        dataSource = new MatTableDataSource&lt;GithubIssue&gt;();
        @ViewChild(MatSort, {static: false}) sort: MatSort;
          p: number = 1;
          total: number;
          loading: boolean;
  
          constructor(private httpDatabase: HttpDatabase){ }
      marked = false;
      isAllSelected() {
          const numSelected = this.selection.selected.length;
          const idSelected = this.selection.selected;
          const numRows = this.dataSource.data.length;
          return numSelected === numRows;
        }
  
        masterToggle() {
          if(this.isAllSelected()){
                  this.selection.clear();
                  // this.isButtonEnable = true;
                  this.marked = false;
              }else{
                  this.dataSource.data.forEach(row =&gt; this.selection.select(row));
                  // this.isButtonEnable = false;
                  this.marked = true
          }
  
      }
  
  
          ngOnInit() {
              this.getPage('desc','created',1);
          }
  
          getPage(sort: string, order: string, page: number) {
             this.httpDatabase.getRepoIssues(sort, order, page).subscribe(res =&gt;{
            console.log("TEST PAGE " +page)
            this.dataSource.data = res['items'];
             console.log(this.dataSource.data)
             this.total = this.dataSource.data.length;
             console.log(this.total)
      });
          }
      }
  </code></pre>