Dynamic value in Angular Material - Sort header

Question

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

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 breaks — dar
– dar, Commented Feb 1, 2018 at 17:41

Daniel · Accepted Answer · 2018-03-16 14:12:50Z

2

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>

answered Mar 16, 2018 at 14:12

Daniel

7421 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DWilches · Accepted Answer · 2018-02-01 04:45:29Z

0

Try this:

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

answered Feb 1, 2018 at 4:45

DWilches

23.4k17 gold badges82 silver badges113 bronze badges

Collectives™ on Stack Overflow

Dynamic value in Angular Material - Sort header

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related