When navigating through the page numbers, the paginators gets stuck in the 3 points " ... "

[selmiAmine]

Angular version: 11.2.14

ngx-pagination version: 5.1.1

When I click on the next or previous arrow the page number update until It reaches the " ... " .

Let's image this : The paginator display is like this : 1 2 3 4 5 ... 10

The result expected is that we navigate starting from 1 to 2 to 3 to 4 to 5 then the 6 appears. But in my case the " ... " will be the ones selected meanwhile the content of currentPage is equal to 6 .

Any relevant code:

This is the HTML code : 

        <ul class="meal-list" >
            <li *ngFor="let meal of reports | paginate: config">
                {{ meal }}
            </li>
        </ul>

    <pagination-template #p="paginationApi" [id]="idConfig" (pageChange)="config.currentPage = $event">
            <div class="custom-pagination">
                <div class="pagination-previous" style="padding: 6px;" [class.disabled]="p.isFirstPage()">
                    <a (click)="previousPage(p.getCurrent())"> <svg width="16" height="16" viewBox="0 0 16 16"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M5 8L10 3L10.7 3.7L6.4 8L10.7 12.3L10 13L5 8Z" fill="#0E141A" />
                        </svg>
                    </a>
                </div>
                <div style="padding: 6px;color: #D3135A;font-weight: bold;" *ngFor="let page of p.pages"
                    [class.current]="p.getCurrent() == page.value">
                    <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                        <span>{{ page.label }}</span>
                    </a>
                    <a class="selectedLabel" *ngIf="p.getCurrent() == page.value">
                        <span>{{ page.label }}</span>
                    </a>
                </div>
                <div class="pagination-next" style="padding: 6px;" [class.disabled]="p.isLastPage()">
                    <a (click)="nextPage(p.getCurrent())"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M10.9998 8L5.9998 13L5.2998 12.3L9.5998 8L5.2998 3.7L5.9998 3L10.9998 8Z"
                                fill="#0E141A" />
                        </svg>
                    </a>
                </div>
            </div>
        </pagination-template>

And this is the code in the component.ts

 reports: Report[] = [
    {
      title:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, quibusdam?",
      dateYear: "2023 April",
      fullDate: "09/05/2023",
      time: "10:00",
      }, 
  ...
]

  idConfig = 'customePagination'
  public config: PaginationInstance = {
    id: 'customePagination',
    itemsPerPage: 6,
    currentPage: 1
  };

  nextPage(page: number) {
    if (this.config.currentPage < Math.ceil(this.reports.length / this.config.itemsPerPage))
      this.config.currentPage = page + 1
  }

  previousPage(page: number) {
    if (this.config.currentPage > 1)
      this.config.currentPage = page - 1
  }