2 Mat-Tables in one html. Pagination not working

[Partha Majumdar]

Dear Sir/Madam,

I have implemented a Mat-Stepper. In 2 steps, I show 2 different Mat-Tables. On the first page, I show a MAt-Table drawing data from uploadDataList and on the second page I draw data from toUploadDataList.

So, I have declared 2 data sources for the Mat-Tables -> uploadData draws data from uploadDataList and toUploadData draws data from toUploadDataList.

Now, I have declared 2 Paginators as shown below.

  uploadData = new MatTableDataSource<UploadData>(this.uploadDataList);
  toUploadData = new MatTableDataSource<UploadData>(this.toUploadDataList);
 
  @ViewChild(MatPaginator) uploadPaginator: MatPaginator;
  // @ViewChild(MatPaginator) toUploadPaginator: MatPaginator;

I assign the 2 Paginators in ngInit() as follows:

this.uploadData.paginator = this.uploadPaginator;
 
this.toUploadData.paginator = this.toUploadPaginator;

When I run this program, the paginator on uploadData works as expected and changes data as expected.

However, the paginator does not work on toUploadData Mat-Table. It shows the same page number as uploadData. However, the data never changes even though I can use the arrow keys of the paginator.

Where I am most confused is that how do I link the paginator to the appropriate object. In the HTML, I am only writing as follows.

<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>

How do I connect the Mat-Table to the Paginator.

Request your kindly letting me know what is going wrong.

Thanks in advance.

Regards,

Partha

[Sander Elias]

Hi Partha,

html:

<mat-paginator #uploadPaginator [pageSize]="10" [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>

controller:

@ViewChild('uploadPaginator', {read:MatPaginator}) uploadpgn:MatPaginator;

should do the trick.

Regards
Sander

​

[Partha Majumdar]

Thanks a lot Mr Sander. It worked like magic.

Regards,

Partha