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;">
↵

Answer 1

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