angular2 bootstrap dynamic carousel

Question

I have a dynamic images coming from a json and doing *ngFor to loop through the objs and putting it in a carousel using bootstrap carousel, but I want to put a readmore link within the *ngFor so each item will have a read more.

I can't figure out how to do when a user click "readmore" it will scroll to its relative item showing about the image if that makes sense.

<div class="col-sm-4" *ngFor="let journey of Journey">
  <div class="journey_block">
    <div class="icon-workflow">
        <div class="view view-fourth">
        <img src="{{ journey.imageName }}" alt="">
        <div class="mask">
            <a href="" class="info" data-target="#carousel-example-generic" data-slide-to="0">Read More</a>
        </div>
        </div>
        <h4 class="journey_title">
        <a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow">
            {{journey.title}}
        </a>
        </h4>
    </div>
</div>

My attempt is I thought I would then need to do for loop, I have 5 items in total in the json data.

getImg() {
   this.http.get('./journey.json')
    .map((res:Response) => res.json())
    .subscribe(data => {
        if(data) {
            var jsonObj = JSON.parse(JSON.stringify(data));
            this.Journey = jsonObj.journey;

            for (var i = 0; i <  this.Journey.length; i++) {
                var element =  this.Journey[i];
                this.objCount = element;
                console.log(this.objCount);
            }
        }

    });
};

View full html structure of the carousel

Carousel structure

Answer 1

You need to have the index inside of the loop for making the data-slide-to attribute unique. This could be done by the predefined Angular2 value index .

Example

<!-- Angular 2.0 -->
<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>

In your code:

<div class="col-sm-4" *ngFor="let journey of Journey; let i = index">
    <div class="journey_block">
      <div class="icon-workflow">
          <div class="view view-fourth">
          <img src="{{ journey.imageName }}" alt="">
          <div class="mask">
              <a href="" class="info" data-target="#carousel-example-generic" [attr.data-slide-to]="i">Read More</a>
          </div>
          </div>
          <h4 class="journey_title">
          <a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow">
              {{journey.title}}
          </a>
          </h4>
      </div>
  </div>