Angular Material Paginator with Goto

Since mat paginator does not have go to specific page, Here I created a component wrapping mat paginator.

mat-paginator-goto.component.ts

import {

  Component,

  OnInit,

  Input,

  Output,

  EventEmitter,

  ViewChild

} from "@angular/core";

import { MatPaginator, PageEvent } from "@angular/material/paginator";

@Component({

  selector: "mat-paginator-goto",

  templateUrl: "./mat-paginator-goto.component.html",

  styleUrls: ["./mat-paginator-goto.component.scss"]

})

export class MatPaginatorGotoComponent implements OnInit {

  pageSize: number;

  pageIndex: number;

  length: number;

  goTo: number;

  pageNumbers: number[];

  @ViewChild(MatPaginator) paginator: MatPaginator;

  @Input() disabled = false;

  @Input() hidePageSize = false;

  @Input() pageSizeOptions: number[];

  @Input() showFirstLastButtons = false;

  @Output() page = new EventEmitter<PageEvent>();

  @Input("pageIndex") set pageIndexChanged(pageIndex: number) {

    this.pageIndex = pageIndex;

  }

  @Input("length") set lengthChanged(length: number) {

    this.length = length;

    this.updateGoto();

  }

  @Input("pageSize") set pageSizeChanged(pageSize: number) {

    this.pageSize = pageSize;

    this.updateGoto();

  }

  constructor() {}

  ngOnInit() {

    this.updateGoto();

  }

  updateGoto() {

    this.goTo = (this.pageIndex || 0) + 1;

    this.pageNumbers = [];

    for (let i = 1; i <= Math.ceil(this.length / this.pageSize); i++) {

      this.pageNumbers.push(i);

    }

  }

  paginationChange(pageEvt: PageEvent) {

    this.length = pageEvt.length;

    this.pageIndex = pageEvt.pageIndex;

    this.pageSize = pageEvt.pageSize;

    this.updateGoto();

    this.emitPageEvent(pageEvt);

  }

  goToChange() {

    this.paginator.pageIndex = this.goTo - 1;

    const event: PageEvent = {

      length: this.paginator.length,

      pageIndex: this.paginator.pageIndex,

      pageSize: this.paginator.pageSize

    };

    this.paginator.page.next(event);

    this.emitPageEvent(event);

  }

  emitPageEvent(pageEvent: PageEvent) {

    this.page.next(pageEvent);

  }

}

mat-paginator-goto.component.html

<div class="d-flex">

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

  </mat-paginator>

  <div class="go-to-container">

    <div class="go-to-label">Go To: </div>

    <mat-form-field>

      <mat-select [(ngModel)]="goTo" (selectionChange)="goToChange()">

        <mat-option *ngFor="let pageNumber of pageNumbers" [value]="pageNumber">{{pageNumber}}</mat-option>

      </mat-select>

    </mat-form-field>

  </div>

</div>

mat-paginator-goto.component.scss

//Bootstrap Temp

.d-flex {

  display: flex;

}

//Original

.go-to-container {

  display: flex;

  align-items: baseline;

  background: white;

  mat-form-field {

    width: 56px;

    margin: 6px 4px 0 4px;

    font-size: 12px;

  }

  .go-to-label {

    margin: 0 4px;

    font-size: 12px;

    color: rgba(0,0,0,.54);

    font-family: Roboto, "Helvetica Neue", sans-serif;

  }

}

Simply import it in module and use.

import { MatPaginatorGotoComponent } from './mat-paginator-goto/mat-paginator-goto.component';

@NgModule({

  declarations: [ MatPaginatorGotoComponent ],

})