0

Among the 4 buttons, I want to use one of them as a next page button. How to do this?
This is the paginator HTML

<mat-paginator 
   [pageSize]="2"
   [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons>         
</mat-paginator>

These are the relevant parts of the typescript code

recordsDataTable:any[]=[ ];
recordsData !: MatTableDataSource<any>;

@ViewChild(MatPaginator) paginator!: MatPaginator;

ngAfterViewInit()
{
  
   this.userservice.getRecords()
   .subscribe(
     (x)=>
       { 
        this.recordsDataTable=x.data;
        this.recordsData= new MatTableDataSource(x.data); 
        this.recordsData.paginator = this.paginator;
             
       }
      )

}
Explorador
  • 47
  • 3
  • 9

2 Answers2

2

In angular material, Paginator comes with an event > (page)="getPageDetails($event)". This event gives us information about the table.

In component.ts file

getPageDetails(event:any) {
  console.log(event);
}

In component.html file

 <mat-paginator showFirstLastButtons
             [length]="totalDataLength"
             [pageSize]="pageSize"
             [pageSizeOptions]="pageOptions"
             (page)="getPageDetails($event)"></mat-paginator>

Example Link: https://stackblitz.com/edit/angular-pyix6j?file=src/app/table-pagination-example.html

a.prakash
  • 131
  • 6
0

The Paginator component handles the whole pagination logic for you. You don't handle clicks on it's buttons. The component has a page event that you can use to handle page changes.

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="yourPageChangeLogic($event)">
</mat-paginator>
hansmaad
  • 18,417
  • 9
  • 53
  • 94
  • My table comes in 2 pages accessed through the API https://reqres.in/api/users?page=1 and https://reqres.in/api/users?page=2. once the data on API 1 is traversed using paginator, then I have to load API 2...But at the end of the data, the next button of the paginator is being disabled .so I can't load the next page from the second API...Is there any way to enable the next button even when the last page is reached? I concatenated both the data into one and then assigning it to the MatTableDataSource and paginator... but I need to do it using page event ... – Explorador May 28 '21 at 10:26