//HTML code
<h5 class="ml-4 mt-4 mb-0 heading-primary">Reminders</h5>
<mat-spinner diameter="50" class="mx-auto" *ngIf="isLoadingResults"></mat-spinner>
<div class="ml-4 table-content">
<table mat-table matSort [dataSource]="datasource" class="mat-elevation-z8" matSortDisableClear>
<ng-container matColumnDef="dateCreated">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date Created</th>
<td mat-cell *matCellDef="let row">{{row.dateCreated}}</td>
</ng-container>
<ng-container matColumnDef="reminderText">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Reminder Text</th>
<td mat-cell *matCellDef="let row">{{row.reminderText}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="cursor"></tr>
<mat-footer-row *matFooterRowDef="['noData']"
[hidden]="isLoadingResults || (datasource && datasource.data.length > 0)"></mat-footer-row>
</table>
</div>
<mat-paginator [length]="data.total" [pageSize]="data.per_page" (page)="getNext($event)"></mat-paginator>
//TS code
import { MatSort } from '@angular/material/sort';
@ViewChild(MatSort) sort: MatSort;
this.clRemindersApiService.getClRemindersList(this.locationId, this.data.per_page, this.data.page).subscribe((response) => {
if (response) {
this.data.items = response.items;
this.data.total = response.total;
this.datasource.data = response.items;
this.datasource.sort = this.sort;
}
});
I have tried all the way search in Google along with this site also still no answer, Have tried all the answers related to : mat-sort-header / mat-sort not working on a particular column