How to hide last page number in Angular pagination?

Question

I want to customise my pagination in angular, it should look something like this:

<< < 1 2 3 ... > >>

<< < ... 7 8 9 ... > >>

Is there any way to achieve this? I am using ngx-pagination but it is showing the last page number which I don't want. Please help.

Current scenario:

< 1 2 3 ... 20 >

Want this: << < 1 2 3 ... > >>

Answer 1

This could be achieved via custom-template. Here in the official docs example: http://michaelbromley.github.io/ngx-pagination/#/custom-template

Here in the template, it loops thru the pages array.

<div *ngFor="let page of p.pages"

Since we don't want the last page, just cut it out of the array

<div *ngFor="let page of p.pages | slice: 0:p.maxSize - 1"

Final result

Full working code could be found here: https://stackblitz.com/edit/angular-xtusj7?file=app/app.component.ts

Edit: As Eliseo pointed out in the comment, when the user move to the last page, that page number won't display in the navigation (as we removed it already). This's obviously not a good UX, so customize as your needs. Eliseo is generous enough to provide the solution too!