angular - *ngFor with index

Question

I have angular 4 app in which I want to get the index of the column from *ngFor and append it to HTML element, I have tried the example in angular.io but it gives me an error

Code:

<li *ngFor="let col of Descriptive_FieldsMap;let i = index;">
  <a class="ShowHideColumns" data-columnindex="{{i + 1}}">
      {{col.FieldName}}
     <i id="data-table-col-{{i + 1}}" class="fa fa-minus-square pull-right">
     </i>
  </a>
</li>

Error:

Error: Template parse errors:↵Can't bind to 'columnindex' since it isn't a known property of 'a'. ("tive_FieldsMap;let i = index;">
↵

that error seems to say data-columnindex is not a valid attribute for <a></a> — Arijoon
– Arijoon, Commented Jun 1, 2017 at 1:19

Arijoon · Accepted Answer · 2017-06-01 01:22:39Z

3

Since data-columnindex is not a native attribute of <a> tag you must take another approach. Bind with the attr directive:

<a class="ShowHideColumns" [attr.data-columnindex]="i + 1">

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings

answered Jun 1, 2017 at 1:22

Arijoon

2,3103 gold badges26 silver badges32 bronze badges

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

1 Comment

tyehia Over a year ago

Thanks a lot, It Worked

Collectives™ on Stack Overflow

angular - *ngFor with index

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related