1

I have multiple paginations with ng-for. For multiple instances, I'm using the variable from ng-for to repeat paginations, but (pagechange) event is mutating data. when I change page in child pagination, it is changing data(first_name). I have a reproduced issue stackBlitz

I have also tried with index, but its disturbing main pagination.

<ul>
    <div *ngFor="let item of collection | paginate: {itemsPerPage:3, currentPage: page,id: mainPagination}; let i = index;">
        <div class="user">
            {{ i + 1 }}. {{ item.first_name }} 
            <!-- <br>Child Pagination -->
            <div class="childPagination" *ngFor="let address of item.address | paginate: {itemsPerPage:3, currentPage: item['first_name'],id: item['first_name']}" style="background-color:#18bc9c"> 
                {{ address.friend }}
            </div>
            <pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"></pagination-controls>
        </div>
    </div>
</ul>
<pagination-controls (pageChange)="page = $event" [id]= "mainPagination" class="my-pagination"></pagination-controls>
Sami Ahmed Siddiqui
  • 2,328
  • 1
  • 16
  • 29
sandeep ganesana
  • 11
  • 2
  • First of all looks like bug will try to investigate further. Second, did you try to use https://www.npmjs.com/package/ngx-paginate instead? – Xesenix Jun 19 '19 at 07:21
  • Thanks for your answer. I couldn't find a way to iterate paginations with out using (pageChange)="item['first_name']= $event". I have gone through the docs but it didn't help. – sandeep ganesana Jun 19 '19 at 11:47

1 Answers1

1

It came from the pageChange event of your child. You are trying to assign a page number to your item['first_name'] (which is actually page 2).

<pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"></pagination-controls>

The pageChange is an event emitting the page number.

I think you can find a way to get the page data with the page number you got from the child from the doc https://www.npmjs.com/package/ngx-pagination.

JStw
  • 1,155
  • 11
  • 20
  • Thanks for your answer. I couldn't find a way to iterate paginations with out using `(pageChange)="item['first_name']= $event"`. I have gone through the docs but it didn't help. – sandeep ganesana Jun 19 '19 at 11:47