ng2-Pagination issue when pagination used for multiple html bootstrap tables on same page

I have two bootstrap tables on the same page and one table is in the main component and other is in the child component, I used declarations in the Module as follows :

import { NgModule }       from "@angular/core";
import { CommonModule }   from "@angular/common";
import { CashierRiskProfileComponent }    from "./cashierriskprofile.component";
import { CashierRiskProfileService }   from "./cashierriskprofile.service";
import { CashierRiskProfileRouting } from "./cashierriskprofile.routing";
import { SharedModule } from "../shared/shared.module";
import {PaginationControlsCmp, PaginatePipe, PaginationService} from "ng2-pagination";
import { GenericExceptionComponent }      from "../shared/genericcomponents/genericexception.component";

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        CashierRiskProfileRouting
    ],
    declarations: [
        PaginationControlsCmp, PaginatePipe, CashierRiskProfileComponent, GenericExceptionComponent
    ],
    providers: [
        PaginationService, CashierRiskProfileService
    ]
})
export class CashierRiskProfileModule { }

//Parent Component 
import { Component, OnInit, Output, EventEmitter, ViewChild} from "@angular/core";
import { CashierRiskProfileService}   from "./cashierriskprofile.service";
import { ICashierRiskProfile, ICashierExceptionDetails } from "../shared/interfaces";

@Component({
    selector: "cashierriskprofile",
    templateUrl: "build/app/CashierRiskProfile/cashierriskprofile.component.html"
    //,directives: [PaginationControlsCmp] --> used to use this in RC 5 and it worked fine but in RC 6 they got deprecated and it is causing isolation issues between parent and child
    //,pipes: [PaginatePipe]
    //,providers: [PaginationService]
})
export class CashierRiskProfileComponent implements OnInit {
    cashierRiskProfiles: ICashierRiskProfile[] = [];
    cashierExceptionDetails: ICashierExceptionDetails[];
    pageNumber: number = 1;

    constructor(private sorter: Sorter,
        private service: CashierRiskProfileService) { }

    ngOnInit() {
        this.filterText = "Filter Exceptions:";
        this.service.getCashierRiskProfiles()
            .then((cashierRiskProfiles: ICashierRiskProfile[]) => {
                this.cashierRiskProfiles  = cashierRiskProfiles;
            });
       }
    rowClicked(rowIndex: number, cashierRiskProfiles: any) {
        this.rowSelectedIndex = rowIndex;
        this.service.getCashierExceptionDetails("201")
            .then((exceptionDetails: ICashierExceptionDetails[]) => {
                this.cashierExceptionDetails = exceptionDetails;
            });
    }
   ngOnDestroy() {
    }
}

//Child Component
import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core";
import {ICashierExceptionDetails} from "../interfaces";

@Component({
    selector: "genericexception-details",
    templateUrl: "build/app/shared/genericcomponents/genericexception.component.html"
  //,directives: [PaginationControlsCmp] --> used to use this in RC 5 and it worked fine but in RC 6 they got deprecated and it is causing isolation issues between parent and child
    //,pipes: [PaginatePipe]
    //,providers: [PaginationService]
})
// this is exception
export class GenericExceptionComponent {
    @Input() cashierExceptions: ICashierExceptionDetails[];
}

//Parent Component HTML

 <div class="col-md-12 " style="margin-top: 15px;">
        <table class="exceptionHighlight table table-bordered table-responsive">
            <thead>
                <tr>
                    <th><strong>Store</strong></th>
                    <th><strong>Cashier</strong></th>
                    <th><strong>Service</strong></th>
                 </tr>
            </thead>
            <tbody>
                <tr *ngFor="let cashier of filteredcashierRiskProfiles | paginate: { itemsPerPage: 5, currentPage: p }  ;let rowIdx=index">
                    <td>{{cashier.storeId}}</td>
                    <td>{{cashier.cashierId}}</td>
                    <td>{{cashier.service}}</td>
                  </tr>
            </tbody>
        </table>
        <pagination-controls class="custom-pagination" (pageChange)="p = $event;rowSelectedIndex=-1"></pagination-controls>
    </div>
**//Dependent paging is occuring with parent and child only when I use ngIf, if i remove ngIf and load the //data directly I dont get this issue**
<div *ngIf="cashierExceptionDetails">
<div>
 <genericexception-details [cashierExceptions]="cashierExceptionDetails"></genericexception-details>
</div>
</div>

//Child Component HTML

<div class="col-md-12" style="margin-top: 15px;">
    <table class="table table-responsive table-bordered">
        <thead>
            <tr>
                <th><strong>Exception Category</strong></th>
                <th><strong>Amount</strong></th>
                <th><strong>Occurance</strong></th>
             </tr>
        </thead>
        <tbody>
            <tr *ngFor="let exception of cashierExceptions | paginate: { itemsPerPage: 1, currentPage: paging }; ">
                <td>{{exception.exceptionCategory}}</td>
                <td>{{exception.amount}}</td>
                <td>{{exception.occurence}}</td>
             </tr>
        </tbody>
    </table>
    <pagination-controls (pageChange)="paging = $event"></pagination-controls>
</div>

Above CashierRiskProfileComponent is parent component and inside its html used GenericExceptionComponent selector which is child component and both have bootstrap tables with pagination. The problem here is isolation of pagination between two grids, when one table page is change it is also changing page for child component table and vice versa. I tried to put that paginationControlsCmp , PaginatePipe in sharedModule but no use. I think this needs to be fixed ?

Note : This is not a support question as it seems to be isolation issue with ng2-pagination using Angular 2 RC 6, in RC 5 it used to work just fine since I used to use directives, Pipes in the individual components and it just worked fine since there is no common module that is sharing this pagination types, but in RC 6 directives, pipes are deprecated I can no longer use them in components but can only use at the module level which is causing isolation issues with pagination on two components on same page

Imp : * Dependent paging is occuring with parent and child only when I use ngIf, if i remove ngIf and load the data directly I dont get this issue*

[vijender1256]

@michaelbromley Thank you it is working now, earlier i Used to import PaginatePipe, PaginationControlsCmp, PaginationService individually instead of Ng2PaginationModule, after i imported complete module it working without any problem, appreciate the help 😃

[lgarro]

Thanks @michaelbromley that worked in my case .