How to bind to data-* attribute in angular2? [duplicate]

Question

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>

Good question :-)

Kieran Ryan
– Kieran Ryan

2020-10-22 09:54:45 +00:00
Commented Oct 22, 2020 at 9:54 — Kieran Ryan
– Kieran Ryan, Commented Oct 22, 2020 at 9:54

Günter Zöchbauer · Accepted Answer · 2015-12-22 09:16:09Z

242

This should do what you want

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

answered Dec 22, 2015 at 9:16

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

Jitendra Solanki Over a year ago

@GünterZöchbauer How can I pass this data-row value in click event?

Günter Zöchbauer Over a year ago

just pass cell.index

Collectives™ on Stack Overflow

How to bind to data-* attribute in angular2? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related