Multiple paginations in one page are not reflecting each other

[theunreal]

Angular 2 version

2.0.0

ng2-pagination version: 0.5.2

Description of issue: When having 2 or more paginations in one page, the pagination controls are not working correctly. Changing one pagination reflect the other. When changing the (pageChange)="p = $event" to (pageChange)="d = $event" it also linked.

Steps to reproduce: Having 2 or more paginations in one page (Component)

Expected result: Each pagination controls will be associated to their own pagination data

Actual result: Moving between pages in one paginations reflect all other paginations in that component.

Any relevant code:

<table>
<tr *ngFor="let tip of normal_tips | paginate: { itemsPerPage: 10, currentPage: p }">
...
</tr>
</table>

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

<table>
<tr *ngFor="let tip of vip_tips | paginate: { itemsPerPage: 10, currentPage: d }"
 (click)="selectedTip=tip">
</tr>
</table>

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

[michaelbromley]

You need to set the ids if you are using multiple instances. Checkout the api docs

<table>
<tr *ngFor="let tip of vip_tips | paginate: { itemsPerPage: 10, currentPage: d, id: 'd' }"
 (click)="selectedTip=tip">
</tr>
</table>

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

[temchannat]

Thank you very much. This is very helpful

[Thirumadhu]

I am trying to use 5 paginations in the same component but I am unable to do. I am getting this error

src/app/website/my-vehicle/my-vehicle.component.ts:12:16 12 templateUrl: './my-vehicle.component.html',

        Error occurs in the template of component MyVehicleComponent.
    src/app/website/my-vehicle/my-vehicle.component.html:592:60 - error NG5002: Parser Error: Unexpected token } at column 110 in [let data of onlineVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: a, id='second' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@155:79

    592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.
src/app/website/my-vehicle/my-vehicle.component.html:592:600m - error NG5002: Parser Error: Missing expected : at column 100 in [let data of onTripVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: b, id='third' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@281:79

592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>
                                                               ~~~~~~~~~~

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.
src/app/website/my-vehicle/my-vehicle.component.html:592:60 - error NG5002: Parser Error: Unexpected token } at column 109 in [let data of onTripVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: b, id='third' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@281:79

592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>
                                                               ~~~~~~~~~~

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.
src/app/website/my-vehicle/my-vehicle.component.html:592:60 - error NG5002: Parser Error: Missing expected : at column 102 in [let data of scheduleVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: c, id='fourth' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@407:79

592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>
                                                               ~~~~~~~~~~

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.
src/app/website/my-vehicle/my-vehicle.component.html:592:60 - error NG5002: Parser Error: Unexpected token } at column 112 in [let data of scheduleVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: c, id='fourth' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@407:79

592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>
                                                               ~~~~~~~~~~

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.
src/app/website/my-vehicle/my-vehicle.component.html:592:60 - error NG5002: Parser Error: Missing expected : at column 103 in [let data of cancelledVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: f, id='fifth' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@532:79

592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>
                                                               ~~~~~~~~~~

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.
src/app/website/my-vehicle/my-vehicle.component.html:592:60 - error NG5002: Parser Error: Unexpected token } at column 112 in [let data of cancelledVehicleList | filter:searchText | paginate: { itemsPerPage: 6, currentPage: f, id='fifth' }] in /home/szigony/Workspace/Projects/rmc_frontend/src/app/website/my-vehicle/my-vehicle.component.html@532:79

592                             nextLabel="Next" (pageChange)="f = $event" id="fifth"></pagination-controls>
                                                               ~~~~~~~~~~

  src/app/website/my-vehicle/my-vehicle.component.ts:12:16
    12   templateUrl: './my-vehicle.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyVehicleComponent.

    Please help me