Multiple paginators not paging correctly

[dturnschek]

Angular version: 7.3.8

ngx-pagination version: 4.1.0

Description of issue: If used multiple paginators the indexing does not work

Steps to reproduce: Use multiple paginators with unique IDs. Use next and previous buttons on both

Expected result: Both paginators should work without changing the other

Actual result: if you Go to page 3 on the first, and then press next on the second paginator, the second jumps to page 4. Same problem with previous buttons

Demo: https://stackblitz.com/edit/angular-edhhsc?file=app/app.component.html

Any relevant code:

[michaelbromley]

Hi,

The issue with your code is that you are using the same variable (p) for the currentPage value for both instances.

[dturnschek]

Then how would i use this within a ngFor?

[michaelbromley]

One way is to create an object, with each key corresponding to a pagination instance id, and the value of that key holding the current page for that instance:

<div *ngFor="let collection of collections">
  <ul>
    <li *ngFor="let item of collection.items | paginate: { currentPage: cp[collection.id], itemsPerPage: 10 }">
       {{ ... }}
    </li>
  </ul>
</div>

class MyComponent {

  cp: { [id: string]: number; } = {};

}

[dturnschek]

Well thanks. Would be nice if that info would stand in the Documentation. :)