Brtdku

I am currently following the course "Angular Material" by Ajden on PluralSight and I am facing some weird behaviour with the sorting which on used with a table is not working completely. In the course, 3 columns are shown, the first column contains numbers and when I try to sort that column, nothing happens, the numbers stays in a assending way presented. When I sort the second column, which is a text column, the sorting works fine, asscending as well as descending. When I try to sort the number column again after I sorted the text column, the sorting is applied to the number column but always ascending, never descending. Am I missing something in my code or is this perhaps a bug in angular material? I am using the newest versions of Angular and Angular Material because I want to learn it that way.

This is the code I have so far related to the sorting:

The number sorting

<mat-form-field>

    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field>



<table mat-table matSort [dataSource]="dataSource">



    <!-- Position Column -->

    <ng-container matColumnDef="position">

        <th mat-header-cell *matHeaderCellDef mat-sort-header>No.</th>

        <td mat-cell *matCellDef="let note"> {{note.id}} </td>

    </ng-container>



    <!-- Name Column -->

    <ng-container matColumnDef="title">

        <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>

        <td mat-cell *matCellDef="let note"> {{note.title}} </td>

    </ng-container>



    <!-- Date Column -->

    <ng-container matColumnDef="date">

        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>

        <td mat-cell *matCellDef="let note"> {{note.date | date: 'd LLLL yyyy'}} </td>

    </ng-container>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>



<mat-paginator [pageSize]="2" [pageSizeOptions]="[1, 2, 5]" showFirstLastButtons></mat-paginator>

Linking the sort element to the datasource

@ViewChild(MatSort) 

sort: MatSort;



ngAfterContentInit(): void {

    this.dataSource = new MatTableDataSource<Note>(this.notes);

    this.dataSource.paginator = this.paginator;

    this.dataSource.sort = this.sort;

}

I also put the code I have so far in a git repository, which can be found here

in mat-sort-header you have to pass json key on which you want sort for example mat-sort-header="emp"