CODEWITHSUNDEEP
angularangular2-templateangular2-servicesangular2-directives
Vikhyath Maiya
Vikhyath Maiya

Reputation: 3192

multiple ngx pagination error-angular 2

I am using angular 2 for one of my projects and i am using ngx-pagination for paginating tables.The structure of my page is like this

parent->child1=table1
        child2-table-2
        child-table-3
        child4-table-4

each child calls its own rest request and fills the table.I have used child components in parent as below

<div class="thirteen wide column" name="leave" id="leaveApproval">
    <div class="ui extended segment">
        <app-leave-approval></app-leave-approval>
        <div #leaveApproval></div>
    </div>
</div>
<div class="thirteen wide right floated column" #timesheetApproval name="timesheet" id="timesheetApproval">
    <div class="ui extended segment">
        <app-timesheetapproval></app-timesheetapproval>
    </div>
</div>

<div class="thirteen wide right floated column" #resourceApproval name="resource" id="resourceApproval">
    <div class="ui extended segment">
        <app-resource-approval></app-resource-approval>

    </div>
    <div></div>
</div>

etc

and in each child component i have used ngx-pagination as 

<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pgNumber};let i=index">

<pagination-controls (pageChange)="pgNumber = $event"></pagination-controls>

and each child has unique variable for pageNumber;

Now the problem i am facing is,when i try to change the page number of one table,it effects other child tables as well.If i click on page-2 of first table,all other tables change their current page to page-2.What am i doing wrong ?Is there anything wrong in the way i am doing ?

Upvotes: 2

Views: 2478

Answers (2)

Oziel Pacheco
Oziel Pacheco

Reputation: 1

Supplemented the first answer, in your component.ts you must declare a second variable for the currentPage and (pageChange) events.

your component.ts

pageActual: number = 1;
  paginaActual2:number =1;

your component.html

//first table    
<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pageActual};let i=index">
        <pagination-controls (pageChange)="pageActual= $event"></pagination-controls>
//second table    
<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pageActual2};let i=index">
        <pagination-controls (pageChange)="pageActual2= $event"></pagination-controls>

Upvotes: 0

Vikhyath Maiya
Vikhyath Maiya

Reputation: 3192

Solved My Issue by specifying id in the template

<pagination-controls  id="some_id" (pageChange)="pageChanged($event)" ></pagination-controls>

and 

| paginate: { id: 'foo'},

Upvotes: 9

Related Questions