Angular2 *ngFor setting index as attribute inside same tag

Question

im trying to create a bootstrap carousel. So i use *ngFor for adding the elements and the carousel-indicators.(little circles indicating current position)

<li data-target="#myCarousel" *ngFor="#item of items; #idx = index"  data-slide-to="idx" [class.active]="idx === 0" >

I am setting the active class entry by [class.active]="idx === 0" and it works fine. But when i am trying to set data-slide-to="idx" the result is not the wanted index as number but the string "idx".

Any idea how to assign the index-value ?

Answer 1

You have two options here:

1. Bind directly to the attribute

[attr.data-slide-to]="idx"

2. Use string interpolation

attr.data-slide-to="{{idx}}"

Answer 2

Binding requires [] or {{}}. Binding to attributes needs the attr. prefix

[attr.data-slide-to]="idx"