Is it possible to not use ellipsis in ngx-pagination?

Question

I'm using ngx-pagination package and trying to implement this:

But this is what I have until now:

My HTML:

<pagination-controls responsive="true" directionLinks="false"></pagination-controls>

My CSS:

.ngx-pagination {
    .current {
        background: orange;
    }
}

Do you know if would it be possible to put more space between the different items? Thus incrementing the width of the component.
In case of more width available, show more numbers instead of ellipsis (...).
Show a dot (like a bullet) between the numbers. For this I have found this. But doesn't work well, it shows the dots below the numbers. Only works for the current number. See below:

Stackblitz: https://stackblitz.com/edit/angular-xbh9ft

do the displayed numbers, or rather the ellipse "change" if you set a fixed width to `.ngx-pagination`? — rebecca, Jul 09 '19 at 14:06
No, they don't. The `
` element's width (the one with the `.ngx-pagination` class) changes, but the distance between the numbers is the same. And the ellipsis is still there. — chick3n0x07CC, Jul 09 '19 at 14:12

score 0 · Accepted Answer · answered Jul 15 '19 at 12:56

Finally, I opened an issue in the package's Github repo and could achive what I wanted. I had to implement a custom template. For me was useful this example.

I leave here the link to a demo in Stackblitz just in case someone finds it useful:

Stackblitz demo: https://stackblitz.com/edit/angular-bxvecv

Is it possible to not use ellipsis in ngx-pagination?

1 Answers1