Add 'go to page' functionality to material pagination in angular

Question

I need to add a 'jump to' functionality to material pagination. it doesn't have built-in method for that so I need to add it manually.

at the moment I have this code:

<mat-paginator [length]="pageLength"
                       [pageSize]="10"
                       [pageSizeOptions]="pageLength | checkPageLength"
                       [showFirstLastButtons]="true">
        </mat-paginator>

and it shows: my current pagination and I need it to have a textbox and a 'go' button for jumping to a specific page since I have many pages.

Answer 1

I found a piece of code from here which is working fine for me:

this.paginator.pageIndex = pageNumber;

this.paginator.page.next({      
     pageIndex: pageNumber,
     pageSize: this.paginator.pageSize,
     length: this.paginator.length
});

Working_Example