title: Implementing ngx-pagination as a custom component
body: <p>I have two components:</p>
  
  <p>list.component and pagination component, within list component I want to write logic of listing records, and I want to use <a href="https://www.npmjs.com/package/ngx-pagination" rel="nofollow noreferrer">ngx-pagination npm package</a> to control pagination of given listing:</p>
  
  <p><strong>list.component.html:</strong></p>
  
  <pre><code>&lt;table id="example" class="patients-listing"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Member&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let record of data['data'] | paginate: {  id: 'server', itemsPerPage: 40, currentPage: patientsData['pagination']['current_page'], totalItems: patientsData['pagination']['total'] }"&gt;
  
              &lt;td&gt;{{record.firstname}}&lt;/td&gt;
              &lt;td&gt;{{record.phone}}&lt;/td&gt;
              &lt;td&gt;{{record.email}}&lt;/td&gt;
              &lt;td&gt;&lt;a class="action" href="javascript:void"&gt;edit&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;div class="group-pagination"&gt;
        &lt;pagination-control id= "server" maxSize="5" (pageChange)="getUsers($event)"&gt;&lt;/pagination-control&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>list-component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
  import { UserService } from '@app/services';
  
  @Component({
    selector: 'listing',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss']
  })
  export class ListMyPatientsComponent implements OnInit, AfterViewInit {
  
    private currentPageNum = 1;
    private perPage = 40;
    data  = null
    constructor(private _userService: UserService) {
      this.getUsers(this.currentPageNum);
     }
  
    ngOnInit() {
  
  
      this._userService.currentUsersList$.subscribe((usersList)=&gt;
      {
        if(usersList)
        {
          this.data = usersList
        }
  
      })
    }
  
    ngAfterViewInit()
    {
  
    }
  
  
    getCareGroup(pageNum)
    {
  
      this._userService.triggerCallForUsers({"page":this.currentPageNum, "perPage":this.perPage})
    }
  
  }
  </code></pre>
  
  <p>Till now my server side pagination is working absolutely fine.</p>
  
  <p>Now I want to use <a href="https://www.npmjs.com/package/ngx-pagination#user-content-paginationcontrolsdirective" rel="nofollow noreferrer">PaginationControlsDirective</a> such that I can put pagination
  template into list-pagination.component.html and then I can do some changes to this template as per requirement. But when I write write this template logic into 
  list-pagination.component.html and then send pageChange event to list.component I do not get correct output, I am receving only pagination no.s like 1 2 3... 35 > which are not even clickable.</p>
  
  <p>I tried below:</p>
  
  <p>list-pagination.component.html:</p>
  
  <pre><code>&lt;pagination-template id= "server" maxSize="5"  #pT="paginationApi"
  (pageChange)="pageChanged()"&gt;
  
  &lt;div class="pagination-previous" [class.disabled]="pT.isFirstPage()"&gt;
  &lt;a *ngIf="!pT.isFirstPage()" (click)="pT.previous()"&gt; &lt; &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div *ngFor="let page of pT.pages" [class.current]="pT.getCurrent() === page.value"&gt;
  &lt;a (click)="pT.setCurrent(page.value)" *ngIf="pT.getCurrent() !== page.value"&gt;
  &lt;span&gt;{{ page.label }}&lt;/span&gt;
  &lt;/a&gt;
  &lt;div *ngIf="pT.getCurrent() === page.value"&gt;
  &lt;span&gt;{{ page.label }}&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="pagination-next" [class.disabled]="pT.isLastPage()"&gt;
  &lt;a *ngIf="!pT.isLastPage()" (click)="pT.next()"&gt; &gt; &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/pagination-template&gt;
  </code></pre>
  
  <p>list-pagination.component.ts:</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'cg-pagination',
    templateUrl: './list-pagination.component.html',
    styleUrls: ['./list-pagination.component.scss']
  })
  export class PaginationComponent implements OnInit {
    @Input() id: string;
    @Input() maxSize: number;
    @Output() pageChange: EventEmitter&lt;number&gt; = new EventEmitter&lt;number&gt;();
    page = 1;
  
     pageChanged(event){
  
      this.pageChange.emit(event)
      }
    constructor() { }
  
    ngOnInit() {
    }
  
  
  }
  </code></pre>
  
  <p>Then adding pagination component in list component:</p>
  
  <pre><code> &lt;cg-pagination (pageChange)="getCareGroup($event)"&gt;&lt;/cg-pagination&gt;
  </code></pre>
  
  <p>then I got only below output for pagination:</p>
  
  <p><a href="https://i.stack.imgur.com/WhHft.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WhHft.png" alt="pagination output"></a></p>
  
  <p>Need help to implement it in right way. </p>
  
  <p>Thanks!</p>
  
  <p>My question is similar to this:</p>
  
  <p><a href="https://stackoverflow.com/questions/47260267/ngx-pagination-does-not-work-for-custom-component">Ngx-pagination does not work for custom component</a> but I did not get what is explained in its answer. OP has answered it himself.</p>