CODEWITHSUNDEEP
htmlangular
Daniel García
Daniel García

Reputation: 61

Data-Slide-to bootstrap binding Angular 2

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>

Upvotes: 5

Views: 5482

Answers (4)

EpisodiosHD Angel
EpisodiosHD Angel

Reputation: 39

use v-bind:data-slide-to="index"

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" 
     v-for="(image, index) in images" v-bind:key="index"
     v-bind:data-slide-to="index"
    :class="{'active' : index===0}"></li>
</ol>

Upvotes: 1

ChinhNV
ChinhNV

Reputation: 351

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

Upvotes: 21

WinMaker
WinMaker

Reputation: 59

Try this

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

Upvotes: 4

Jong-Hyen Kim
Jong-Hyen Kim

Reputation: 815

try this code

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

data-slide-to="i" -> [data-slide-to]="i"

Upvotes: -1

Related Questions