Angular – MatSort not working. Throws Error: MatSortHeader must be placed within a parent element with the MatSort directive

angularangular-material

After i specify the mat-sort-header attribute on matHeaderCellDef to create a Sortable table in Angular Material, getting the following error

MatSortHeader must be placed within a parent element with the MatSort directive.

<mat-table #table matSort [dataSource]="myHttpDataSource">
....
<ng-container matColumnDef="myColumnName">
<mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.somedetails}} </mat-cell>
</ng-container>
</mat-table>

Any pointers/help appreciated

Best Answer

Add 'matSort' attribute to mat-table

<mat-table #table [dataSource]="dataSource" matSort>
</mat-table>
Related Topic