[AngularJS] 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.


1.
2. uploadData = new MatTableDataSource<UploadData>(this.uploadDataList);
3. toUploadData = new MatTableDataSource<UploadData>(this.toUploadDataList);
4.
5. @ViewChild(MatPaginator) uploadPaginator: MatPaginator;
6. // @ViewChild(MatPaginator) toUploadPaginator: MatPaginator;


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


1.
2. this.uploadData.paginator = this.uploadPaginator;
3.
4. 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.


1.
2. <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

Post by Sander Elias
Hi Partha,
<mat-paginator #uploadPaginator [pageSize]="10" [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>
@ViewChild('uploadPaginator', {read:MatPaginator}) uploadpgn:MatPaginator;
should do the trick.
Regards
Sander
​