Search code examples
htmlcssangularionic3ngx-pagination

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


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

enter image description here

But this is what I have until now:

enter image description here

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: enter image description here

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


Solution

  • 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: