How to go to the 1st page of the table when searching in Angular?

Question

This is an angular 8 application. It has a table with mat-paginator.

<mat-paginator [pageSize]="commonPageSize" [length]="totalElements"
                   (page)="getData($event.pageIndex, this.isSearch, this.key, this.value)" showFirstLastButtons></mat-paginator>

I get data from an API call for each next page click

(page)="getData($event.pageIndex, this.isSearch, this.key, this.value)" 

pageSize is always 10 and I'm retrieving 10 rows per each API call. Below is my ts file.

  getData(pageNumber: number, isSearch: string, key: string, value: string) {
if (this.subscription) {
  this.subscription.unsubscribe();
}

this.subscription = this.service.getData(pageNumber.toString(), this.commonPageSize,
  isSearch, key, value)
  .subscribe(
    data => {
      if(data.length !== 0) {
        this.isDownloadCsvBtnEnable = false;
      }
      if(this.totalElements == null && data.length > 0) {
        this.totalElements = parseInt(data[0].totalElements,10 );
      }
      this.data= new MatTableDataSource(data);
      this.number = this.data.connect().pipe(map((data: any) => data.length === 0));
      this.data.sort = this.sort;
    }
  );

}

The problem is suppose I'm in the 3rd page and pass values for a search. Then table is not go to the first page. Searched data was loaded to the table for that 3rd page. It has not navigated to the first page.. Can anyone pls tell me how to redirect to the first page.

Thnks

Answer 1

There is an example of how to do this in the Angular Material docs.

https://stackblitz.com/angular/gxxgljxnpbb?file=src%2Fapp%2Ftable-overview-example.ts

Basically, you need to use ViewChild to get a reference to the paginator in the component. Then whenever the filter is changed you can tell the paginator to go to the first page.