Mat-table Sorting Demo not Working

For anyone else who may have this problem: The problem was I didn't read the API reference properly on the angular materials website, the part that said I had to import MatSortModule. After I changed my imports list in app.module.ts to

imports: [
    BrowserModule,
    MatTableModule,
    MatSortModule
  ],

it worked fine

I had a problem that the sorting function was working but it wasn't sorting properly. I realized that matColumnDef has to have the same name of the property of my class / interface that I am referencing in matCellDef.

According to the Angular Material documentation:

By default, the MatTableDataSource sorts with the assumption that the sorted column's name matches the data property name that the column displays.

For exemple:

<ng-container matColumnDef="name"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>

The name in the matColumnDef directive has to be the same as the name used in the <mat-cell> component.

If the table is inside *ngIf, it won't be working. It will work if it is changed to [hidden]