As a newcomer to Angular, I am still learning and have encountered an issue with sorting in the mat table. I have multiple tables on one page, each separated by a mat tab. The problem is that sorting only works on the first table ("crane master list") in the first tab, while the rest do not respond.
TS
import { MatSort, Sort } from '@angular/material/sort';
@ViewChild(MatSort, { static: true }) sortCrane: MatSort;
@ViewChild(MatSort, { static: true }) sortLifeboat: MatSort;
preloadData() {
//fetch data from api
this.masterlistService.getCrane().subscribe(res => {
this.craneDataSource = new MatTableDataSource(res);
this.craneDataSource.sort = this.sortCrane;
});
this.masterlistService.getLifeboat().subscribe(res => {
this.lifeboatDataSource = new MatTableDataSource(res);
this.lifeboatDataSource.sort = this.sortLifeboat;
});
}
HTML
<mat-tab-group style='min-height:37rem;' (selectedTabChange)="onClickTab($event)">
<mat-tab label="Crane Masterlist">
<table mat-table [dataSource]="this.craneDataSource" class="mat-elevation-z8" style="margin-top: 3.5rem;" matSort (matSortChange)="announceSortChange($event)">
<ng-container matColumnDef="Region">
<th mat-header-cell *matHeaderCellDef class="thead-dark" mat-sort-header> Region </th>
<td mat-cell *matCellDef="let item"> {{item.Region}} </td>
</ng-container>
//....etc
</table>
</mat-tab>
<mat-tab label="Lifeboat Masterlist">
<table mat-table [dataSource]="this.lifeboatDataSource" class="mat-elevation-z8" style="margin-top: 3.5rem;"
matSort (matSortChange)="announceSortChange($event)">
<ng-container matColumnDef="Region">
<th mat-header-cell *matHeaderCellDef class="thead-dark" mat-sort-header> Region </th>
<td mat-cell *matCellDef="let item"> {{item.Region}} </td>
</ng-container>
//....etc
</table>
</mat-tab-group>
</mat-tab>