Paginator not working on multiple table with angular material table - angular6

Question

I have few table in my application with mat-paginator. The first table paginator(#paginatorregin) working fine.The second table paginator(#paginatorcountry) and sorting is not working but length applied on pagination table based on how much value i got from json object, here i add my code below
<table mat-table [dataSource]="regionsDataSource" matSort>
<ng-container matColumnDef="regions">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Regions</th>
<td mat-cell *matCellDef="let element"> {{element.regions}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="regionsColumn"></tr>
<tr mat-row *matRowDef="let row; columns: regionsColumn;"></tr>
</table>
<mat-paginator #paginatorregin [length]="regionsDataSource.length" [pageSize]="3" [pageIndex]="0" [pageSizeOptions]="[3,5,10]"showFirstLastButtons></mat-paginator>
<table mat-table [dataSource]="countryDataSource" matSort>
<ng-container matColumnDef="country">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Contry</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="countryColumn"></tr>
<tr mat-row *matRowDef="let row; columns: countryColumn;"></tr>
</table>
<mat-paginator #paginatorcountry [length]="countryDataSource.length" [pageSize]="10" [pageIndex]="0"[pageSizeOptions]="[10, 20, 40]" showFirstLastButtons> </mat-paginator>
<mat-form-field>
<mat-select placeholder="Regions" [(ngModel)]="adminsettingvalue.reginvalue" (ngModelChange)="regionChangeItem($event)"
name="regindropdown">
<mat-option *ngFor="let region of regiondropdown" [value]="region.id">
{{region.viewValue}}
</mat-option>
</mat-select>
component code:
export interface Regions {
regions: string;
}
const regionElememtData: Regions[] = [
{ regions: 'Americas' },
{ regions: 'Asia Pacific' },
{ regions: 'Europe' },
{ regions: 'Middle East' },
{ regions: 'Africa' }
];
const countryDataSource = [];
#ViewChild('paginatorregin') paginator: MatPaginator;
#ViewChild('paginatorcountry') paginatorcountry: MatPaginator; #ViewChild(MatSort) sort: MatSort;
regionsColumn: string[] = ['regions'];
countryColumn: string[] = ['country'];
regionsDataSource = new MatTableDataSource<Regions>(regionElememtData);
countryDataSources = new MatTableDataSource(countryDataSource);
ngOnInit() {
this.regionsDataSource.paginator = this.paginator;
this.regionsDataSource.sort = this.sort;
}
ngAfterViewInit() {
this.countryDataSource.paginator = this.paginatorcountry;
this.countryDataSource.sort = this.sort;
}
listOfCounty: any = [];
countryDataSources = new MatTableDataSource();
regionChangeItem(eventvalue) {
if (eventvalue == 1) {
this.commonservice.getAmericaList().subscribe(americavalue => {
this.listOfCounty= americavalue;
})
}
this.countryDataSources.data = this.listOfCounty;
}
Here the first table working as expected with sort, pagination. Second table pagination value applied with json value length but it will display total value i add 10 data per page it's working the #paginatorcounty table.

Answer 1

You can try by using two matSort selectors for two different table like:
HTML Code:
// For table 1
<table mat-table [dataSource]="regionsDataSource" #t1Sort="matSort" matSort>
// Tr and other table related content
</table>
// For table 2
<table mat-table [dataSource]="countryDataSource" #t2Sort="matSort" matSort>
// Tr and other table related content
</table>
In TS:
#ViewChild('paginatorregin') paginator: MatPaginator;
#ViewChild('paginatorcountry') paginatorcountry: MatPaginator;
#ViewChild('t1Sort') t1Sort: MatSort; // use two diff. sort for two table
#ViewChild('t2Sort') t2Sort: MatSort;
regionsColumn: string[] = ['regions'];
countryColumn: string[] = ['country'];
regionsDataSource = new MatTableDataSource<Regions>(regionElememtData);
countryDataSource = new MatTableDataSource<Country>(countryElememtData);
constructor() {}
ngOnInit() {
this.regionsDataSource.paginator = this.paginator;
this.regionsDataSource.sort = this.t1Sort;
this.countryDataSource.paginator = this.paginatorcountry;
this.countryDataSource.sort = this.t2Sort;
}
EDIT:
if (eventvalue == 1) {
this.commonservice.getAmericaList().subscribe(americavalue => {
this.listOfCounty= americavalue;
this.countryDataSources.data = this.listOfCounty;
this.countryDataSource.paginator = this.paginatorcountry; // Add these two lines here
this.countryDataSource.sort = this.t2Sort;
})
}
WORKING DEMO