CODEWITHSUNDEEP
javascriptangularangular6ngforngx-pagination
sandeep ganesana
sandeep ganesana

Reputation: 11

ngx pagination, How to have multiple paginations with NgFor? Issue with my code, (pagechange) is manipulating component data

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>

Upvotes: 1

Views: 1471

Answers (1)

JStw
JStw

Reputation: 1205

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.

Upvotes: 1

Related Questions