I am trying to implement sorting in using angular version 7.3.
Below is my source code:
<table
mat-table
[dataSource]='dataSource'>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
</table>
Here is the javascript file source is:
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}
];
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
}
I am using angular version 7 and the sorting feature I am not able to write. Need help in that as I am new to angular
MatSortModule to AppModule.import { MatSortModule } from '@angular/material';
@NgModule({
imports: [
...,
MatSortModule,
],
...
})
export class AppModule {}
Or if you have another module such as MaterialModule:
import { MatSortModule } from '@angular/material';
@NgModule({
exports: [
...,
MatSortModule,
],
...
})
export class MaterialModule {}
import { MaterialModule } from /* material.module.ts path */;
@NgModule({
imports: [
...,
MaterialModule,
],
...
})
export class AppModule {}
2.1. Apply matSort directive to table (parent) element.
2.2. Apply mat-sort-header directive to each mat-header-cell element.
(Reference: Adding sort to table headers)
<table
mat-table
[dataSource]='dataSource' matSort>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
</table>
MatTableDataSource instance.dataSource = new MatTableDataSource(ELEMENT_DATA);
export class TableSortingExample implements OnInit {
...
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource.sort = this.sort;
}
}