Ngx-pagination does not work for custom component

Question

I am trying to build a custom ngx-pagination for the library and I am

referring the link https://github.com/michaelbromley/ngx-pagination But I do not

understand what I need to do to build the custom pagination.It does not respond to

a click event.

HTML

<table class="table">
  <thead>
    <tr>
      <th>SL</th>
      <th>Ref</th>
      <th>Project Name</th>
      <th>Product Owner</th>
      <th>Project Type</th>
      <th>Remaining Days</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let project of projects  | paginate: { itemsPerPage: 7, currentPage: p } ;let ndx = index" >
      <td>{{ndx+1}}</td>
      <td>{{project.ref}}</td>
      <td>{{project.projectName}}</td>
      <td>{{project.productOwner}}</td>
      <td>{{project.projectType}}</td>
      <td>{{project.days}}</td>
      <td>{{project.status}}</td>
    </tr>
   </tbody>
</table>

  <pagination-template #p="paginationApi"
                 (pageChange)="pageChange.emit($event)">

    <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
        <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
    </div>

    <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
        <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
            <span>{{ page.label }}</span>
        </a>
        <div *ngIf="p.getCurrent() === page.value">
            <span>{{ page.label }}</span>
        </div>
    </div>

    <div class="pagination-next" [class.disabled]="p.isLastPage()">
        <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
    </div>

CUSTOM-COMPONENT.TS

@Input() id: string;
@Input() maxSize: number;
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
page: number = 1;

 pageChanged(event){
    console.log("pageChanged");
  }

What else changes are required to make it work?Am I missing something here I have installed the library using npm.Please suggest.

Where should I define the line @Output() pageChange: EventEmitter = new EventEmitter(); — Ajay Kalkoti, Nov 13 '17 at 11:15

score 3 · Answer 1 · answered Nov 13 '17 at 12:06

Solved the issue.Seems to be naming conflict.

HTML

 <pagination-template #pT="paginationApi"
                         (pageChange)="p = $event">

            <div class="pagination-previous" [class.disabled]="pT.isFirstPage()">
                <a *ngIf="!pT.isFirstPage()" (click)="pT.previous()"> < </a>
            </div>

            <div *ngFor="let page of pT.pages" [class.current]="pT.getCurrent() === page.value">
                <a (click)="pT.setCurrent(page.value)" *ngIf="pT.getCurrent() !== page.value">
                    <span>{{ page.label }}</span>
                </a>
                <div *ngIf="pT.getCurrent() === page.value">
                    <span>{{ page.label }}</span>
                </div>
            </div>

            <div class="pagination-next" [class.disabled]="pT.isLastPage()">
                <a *ngIf="!pT.isLastPage()" (click)="pT.next()"> > </a>
            </div>

    </pagination-template>

Hi Ajay, can you help me with https://stackoverflow.com/questions/51870842/implementing-ngx-pagination-as-a-custom-component ? — Always_a_learner, Aug 16 '18 at 06:30

Ngx-pagination does not work for custom component

1 Answers1

Linked