Table angular material pagination does not work as

Question

I am creating a table using Angular Material Table

I want the table to have pagination so that user can go to preferred page and rearrange page to be displayed, something like this one:

Material data table

Here is what I have so far:

HTML

<div class="mat-elevation-z8">
    <table cellspacing='2' cellpadding='40' mat-table [dataSource]="dataSource" matSort>
  <!--Tv Posters-->
  <ng-container matColumnDef="poster">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Poster </th>
      <td mat-cell *matCellDef="let row">
          <img 
           *ngIf="row.poster_path" 
            class="thumbnail" 
            src="http://image.tmdb.org/t/p/w500/{{row.poster_path}}">
        </td>
    </ng-container>
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
      </ng-container>

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

      <!-- Release date -->
      <ng-container matColumnDef="release">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Release</th>
        <td mat-cell *matCellDef="let row"> {{row.first_air_date}} </td>
      </ng-container>

      <!-- Description Column -->
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.overview}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;">
      </tr>
    </table>
  <div class="row pagination">
    <div class="col page-select">
      <div class="label">Go to page:</div>
      <mat-form-field>
        <mat-select [ngModel]="manualPage" (ngModelChange)="updateManualPage($event)">
          <mat-option [value]="1">1</mat-option>
          <mat-option [value]="2">2</mat-option>
          <mat-option [value]="3">4</mat-option>
          <mat-option [value]="5">5</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="col-md-auto">
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
  </div>
  </div>
  </div>

Here a method for go to page:

component.ts

...........
manualPage: null;
...........

 updateManualPage(index) {
    this.manualPage = index;
    this.paginator.pageIndex = index - 1;
  }

  clearManualPage() {
    this.manualPage = null;
  }

Unfortunately right now I can only rearrange the pages to be displayed in my table, when I select a page e.g. 2 as specified nothing happen.

What am I doing wrong here? Any suggestion?

Answer 1

Try this piece of code:

<mat-select [(ngModel)]="manualPage" (ngModelChange)="updateManualPage($event)">
    <mat-option [value]="1">1</mat-option>
    <mat-option [value]="2">2</mat-option>
    <mat-option [value]="3">3</mat-option>
    <mat-option [value]="4">4</mat-option>
    <mat-option [value]="5">5</mat-option>
</mat-select>

Do tell me if this works or not.

Answer 2

I found the solution maybe some one will be interested in future

HTML paginationa part

<div class="row pagination">
    <div class="col page-select">
      <div class="label gotoPage">Go to page:</div>
      <mat-form-field>
          <mat-select [(ngModel)]="manualPage" (ngModelChange)="updateManualPage($event)">
              <mat-option [value]="1">1</mat-option>
              <mat-option [value]="2">2</mat-option>
              <mat-option [value]="3">3</mat-option>
              <mat-option [value]="4">4</mat-option>
              <mat-option [value]="5">5</mat-option>
          </mat-select>
      </mat-form-field>
    </div>
    <div class="col-md-auto">
    <mat-paginator 
        [pageSize]="5" 
        [pageIndex]='0'
        [pageSizeOptions]="[5, 10, 20]" 
        (page)="clearManualPage()">
    </mat-paginator>  
  </div>
  </div>

compo.ts part

public updateManualPage(index: number): void {
    this.manualPage = index;
    this.paginator.pageIndex = index;
    this.paginator.page.next({
      pageIndex: this.paginator.pageIndex,
      pageSize: this.paginator.pageSize,
      length: this.paginator.length
    });
  }
  public clearManualPage(): void {
    this.manualPage = 0;
  }

Now go to page or jump to page works perfectly