Adding Sorting Functionality to Angular Material Table

Below are the steps of how to add sorting feature of pre-fetched data to Angular Material 6 Table:

- on html page, add matSort to the table and mat-sort-header to each column that we would like to enable:

<table mat-table . . . matSort>
    <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> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>
. . .
</table>

- on module page (e.g., module.ts):

import { MatSortModule } from '@angular/material/sort;
@NgModule({
  . . .,
  imports: [
    . . .
    MatSortModule
  ],
. . .
})

- on component page (e.g., component.ts):

import { MatSort } from '@angular/material';
export class AppComponent implements AfterViewInit, OnInit{
  . . .
 
  @ViewChild(MatSort) sort: MatSort;
 
 
  ngAfterViewInit() {
    . . .
    this.dataSource.sort = this.sort;
  }
 
  . . .
}

I will create a post of how to do paging and sorting with server-side data interaction soon.