title: angular2 bootstrap dynamic carousel
body: <p>I have a dynamic images coming from a <code>json</code> and doing <code>*ngFor</code> to loop through the objs and putting it in a carousel using bootstrap carousel, but I want to put a readmore link within the <code>*ngFor</code> so each item will have a read more.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;div class="col-sm-4" *ngFor="let journey of Journey"&gt;
    &lt;div class="journey_block"&gt;
      &lt;div class="icon-workflow"&gt;
          &lt;div class="view view-fourth"&gt;
          &lt;img src="{{ journey.imageName }}" alt=""&gt;
          &lt;div class="mask"&gt;
              &lt;a href="" class="info" data-target="#carousel-example-generic" data-slide-to="0"&gt;Read More&lt;/a&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;h4 class="journey_title"&gt;
          &lt;a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow"&gt;
              {{journey.title}}
          &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My attempt is I thought I would then need to do for loop, I have 5 items in total in the json data.</p>
  
  <pre><code>getImg() {
     this.http.get('./journey.json')
      .map((res:Response) =&gt; res.json())
      .subscribe(data =&gt; {
          if(data) {
              var jsonObj = JSON.parse(JSON.stringify(data));
              this.Journey = jsonObj.journey;
  
              for (var i = 0; i &lt;  this.Journey.length; i++) {
                  var element =  this.Journey[i];
                  this.objCount = element;
                  console.log(this.objCount);
              }
          }
  
      });
  };
  </code></pre>
  
  <p>View full html structure of the carousel</p>
  
  <p><a href="https://plnkr.co/edit/qTgvzUYCGzFqqpeRZv8K?p=catalogue" rel="nofollow">Carousel structure</a></p>