Angular 4.4.x mat-table header not sorting

0
votes

I've got a mat-table with a sorting header so I'm decorating the columns as per the examples:

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

The sorting headers aren't working and it looks like it's how this template is being expanded. Inspecting header elements in the examples (i.e. https://stackblitz.com/edit/angular-material2-issue-sct3gm?file=app%2Fapp.component.ts) I can see that the header should render to div.mat-sort-header-container but mine are rendering (for column e.g. 'maintainer_name') as:

<mat-header-cell _ngcontent-c3 class="mat-header-cell cdk-column-site_maintainer_name mat-column-site_maintainer_name" mat-sort-header role="columnheader">

I've updated to latest angular cli/core etc but persists. Also copied examples into another component and same (lack of) result.

1
angularangular-material
This is something to do with my app setup and what I'm importing. I've created a new app from the CLI and it works fine so it's definitely a config error on my part but as to what I'm none the wiser yet... - Richard Bown

1 Answers

0
votes

Yes, this was a consequence of building on top of another extant app and also the Angular Material docs being a little caught between name changes (point in time). Working in 'Compatibility Mode' Angular Material allows Md prefixes (i.e MdTableModule) but new style is with 'Mat' prefixes. This can make for a confusing set of imports. I cleared out all of my existing imports and replaced them with a canonical list of Material imports all featuring the Mat prefix.

If you come across this problem trying building against a new app generated fresh from the angular-api command line.