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

Angular version: 5.2.9

ngx-pagination version:4.0.0

Description of issue: 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

[michaelbromley]

Glad it helped you!

As a detail, I have observed this DOM element inside the <pagination-controls> (the default, not the custom one) that, I guess, is for responsive mode:

Yes, that’s right.

For small screen support in your custom template, you can just include the markup in the same custom template, and use CSS to show or hide it with a media query. Here’s how the default template markup/css looks:

 <li class="small-screen">
    {{ p.getCurrent() }} / {{ p.getLastPage() }}
 </li>

@media screen and (max-width: 601px) {
  .ngx-pagination.responsive .small-screen {
    display: inline-block; } 
  .ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next) {
    display: none; }
}

[michaelbromley]

Hi!

For the styling, you can either override the CSS styles (which I see you have attempted in the StackBlitz) or, if you want more control, create your own custom template so you have full control over the markup.

Based on the desired style in your first image, I’d say you’d probably need to go with a custom template to get that effect with the dots in between the numbers.

In case of more width available, show more numbers instead of ellipsis (…).

There is the maxSize input which will cause more pages to be displayed before using the ellipsis.