title: Get Angular2/4 Carousel from service to loop over images
body: <p>I have a carousel in Angular. It is relatively simple to embed slide images in the html, but I want to insert them from an array in a service.</p>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;div id="carouselExampleControls" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;ul class="carousel-item active"&gt;
        &lt;li *ngFor="let image of visibleImages" &gt;
          &lt;img src="{{image.url}}" class ="tn"&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My ts for the component looks like this:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ImageServiceService } from '../image-service.service';
  
  @Component({
    selector: 'app-image-slider',
    templateUrl: './image-slider.component.html',
    styleUrls: ['./image-slider.component.css']
  })
  export class ImageSliderComponent implements OnInit {
      visibleImages: any[] = [];
  
    constructor(private imageService: ImageServiceService) {
      this.visibleImages = this.imageService.getImages();
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>And my ts for the service looks like this:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class ImageServiceService {
  
      visibleImages = [];
      getImages(){
          return this.visibleImages = IMAGES.slice(0);
      }
  
      getImage(id: number){
              return IMAGES.slice(id).find(image =&gt; image.id === id);
      }
  
  }
  
  const IMAGES = [
      {"id": 1, "category": "paintings", "caption": "a painting", "url": '../assets/SBI_Slide_1.jpg'},
      {"id": 2, "category": "paintings", "caption": "a painting", "url": '../assets/Eagle_Slide_2.jpg'},
      {"id": 3, "category": "paintings", "caption": "a painting", "url": '../assets/Knot_Slide_3.jpg'},
  ];
  </code></pre>
  
  <p>First I want to loop over the images, instead of displaying them all at once. It might be good if there was a wait between stages of the loop?</p>
  
  <p>Next I want to trigger going forward or backward through the loop with a method?</p>