How to bind to data-* attribute in angular2?

angular angular-dart
tomaszkubacki picture tomaszkubacki · Dec 22, 2015 · Viewed 29.9k times · Source

Assuming I have really large grid of cells I want to add data-row and data-col atribute values and bind from model. How can I bind data-row from angular2 (beta0 in Dart).

Binding with data-row="{{boundVal}}" does not seem to work. (no data attribute appears in output html)

eg.

<table>
  <tr *ngFor="#row of rows" >
      <td *ngFor="#cell of row.cells" data-row="{{row.index}}" data-col="{{cell.index}}" >
      </td>
  </tr>
</table>

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Dec 22, 2015

This should do what you want

[attr.data-row]="row.index" [attr.data-col]="cell.index"

Related questions

Angular2 dynamic change CSS property

We are making an Angular2 application and we want to be able to somehow create a global CSS variable (and update the properties' values whenever changed when the variable is assigned). We had used Polymer for a while (now we …

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More
ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have …

Read More