1
votes

How can I inject dynamic values as I did with "id" in material sort? When I try using interpolation mat-sort-header results in an error - Can't bind to 'mat-sort-header' since it isn't a known property of 'th'

The table gets built out dynamically.

<table matSort (matSortChange)="sortData($event)">
<tr>
<th mat-sort-header="{{mapped.id}}" id="{{mapped.id}}">{{mapped.header}}</th>   
</tr>...
</table>

I'm using import { Sort } from '@angular/material';

And it's taken from https://material.angular.io/components/sort/overview

thanks very much

2
What is your requirement? Dynamic values for headers?Krishna Mohan
No, the doc for sort uses hard coded values in the table. I have a dynamic table that loops through the prop name and (after reformatting) applies that header and subsequent value(s) to the column. However when I use interpolation for that mat-sort-header. it breaksdar

2 Answers

1
votes

You might have forgotten to add the MatSortModule.

Whenever you see something like:

Can't bind to [material-directive] since it isn't a known property of [element].

It is a sign that you didn't add the module.

Also a more angular-y way of writing it is:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th [mat-sort-header]="mapped.id" [id]="mapped.id">{{mapped.header}}</th>   
 </tr>
</table>
0
votes

Try this:

<table matSort (matSortChange)="sortData($event)">
    <tr>
        <th mat-sort-header id="{{mapped.id}}">{{mapped.header}}</th>   
    </tr>...
</table>