ngx-pagination - Reset pagination to first page

Question

I am using ngx-pagination with server side paging. So, user enters some search criteria and hits the search button. This results in a call to the server for the first page of the results. On the client side, I have this code to show the pagination controls

<div class="col-sm-4">
  <pagination-controls (pageChange)="getPage($event)" 
                       id="serverPaging">
  </pagination-controls>
</div>

<div *ngFor="let result of results | paginate: { 
  id:'serverPaging', 
  itemsPerPage: 10, 
  currentPage: p, 
  totalItems: totalResultCount }">
  ...
</div>

This works as expected. The first page is shown and '1' in the pagination bar is highlighted.

Lets say, user now clicks on last page. This would highlight the last page in the pagination bar. Everything works as expected so far.

Now user re-executes the search by clicking on the 'Search' button again. This re-renders the search results. Since it's a fresh search, server returns the first page. However, pagination bar still has the last page highlighted.

How can I reset the pagination bar to the first page on some action, like re-execution of search.

Angular version: 4.2.4 ngx-pagination version: 3.0.0

Answer 1

You can force the update if you bind currentPage property with a variable in your .ts file.
For instnace:

component.ts

export class DemoComponent implements OnInit {

  public p: number; //Declare the variable that you're using in currentPage

  //Constructor and OnInit...

  onSearch(word: string): void {
    this.SearchService.search(word).subscribe((data: Array<any>) => {
        this.data = data;
        this.p = 1;
    });
  }
}

HTML

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

<div *ngFor="let d of data | paginate: { 
  itemsPerPage: 10, 
  currentPage: p, 
  totalItems: total }"></div>