Image Carousel Component

image-carousel.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/zip';
import 'rxjs/add/operator/repeat';

@Component({
  selector: 'image-carousel',
  template: `
    <img [src]="imageSources$ | async" />
    `
})
export class ImageCarouselComponent implements OnInit {
  @Input() imageSources: string[];
  @Input() delayInMs = 1000; // Default to one second

  imageSources$: Observable<string>;

  constructor() {

  }

  ngOnInit() {
    if (!(this.imageSources instanceof Array)) {
      throw new Error('ImageComponent "imageSources" is required');
    }
    this.imageSources$ = Observable.from(this.imageSources)
      .zip(
        Observable.interval(this.delayInMs),
        (v) => v
      )
      .repeat()
      .startWith(this.imageSources[0]);

    this.imageSources$.subscribe(val => console.log(val));
  }
}