Data-Slide-to bootstrap binding Angular 2

Question

Is it posibble to bind index property of *ngFor directive of Angular to some attribute that isnt part of native html?

<ol class="carousel-indicator">
    <li data-target="#myCarousel" data-slide-to="{{i}}" *ngFor="let item of items; let i = index></li>
</ol>

Answer 1

Please edit to:

<li *ngFor="let banner of banners,let i = index" data-target="#carousel" class="{{ (i == 0) ? 'active' : '' }}" attr.data-slide-to="{{i}}"></li>

* edit: attr.data-slide-to="{{i}}" => Success

Answer 2

Try this

data-slide-to -----> [attr.data-slide-to]