#8 add slideCounterChange event

src/app/app.component.html

@@ -1,7 +1,6 @@
 <div class="container">
-	<carousel
-		[images]="images">
+	<carousel [images]="images" (slideCounterChange)="onImgChange($event)">
 	</carousel>
 </div>
-
+  
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -53,8 +53,8 @@ export class AppComponent {
 
     ngAfterViewInit() {
         this.myCarousel = this.carouselComponent.find(elem => elem.id === "my-carousel");
-    }
-
+	}
+	
     requestFullscreen() {
     	document.documentElement.requestFullscreen();
     }
@@ -92,4 +92,8 @@ export class AppComponent {
 	select(index) {
 		this.myCarousel.select(index);
 	}
+
+	onImgChange(index: number) {
+		console.log(index);
+	}
 }

src/app/carousel/carousel.component.ts

@@ -3,6 +3,7 @@ import {ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Hos
 import {Images} from './interfaces';
 import {Touches} from './touches';
 import {Carousel} from './carousel';
+import { Subject } from 'rxjs';
 
 
 @Component({
@@ -25,6 +26,7 @@ export class CarouselComponent implements OnDestroy {
     _width: number;
     _cellWidth: number | '100%' = 200;
     isMoving: boolean;
+    slideCounterChange$: Subject<number> = new Subject();
 
     get isLandscape(){
         return window.innerWidth > window.innerHeight;
@@ -54,7 +56,7 @@ export class CarouselComponent implements OnDestroy {
     }
 
     @Output() events: EventEmitter<any> = new EventEmitter<any>();
-
+    @Output() slideCounterChange: EventEmitter<number> = new EventEmitter<number>();
     @Input() height: number = 200;
     @Input() width: number;
     @Input() borderRadius: number;
@@ -126,6 +128,8 @@ export class CarouselComponent implements OnDestroy {
 
         this.initCarousel();
         this.setDimensions();
+
+        this.slideCounterChange$.subscribe(index => this.slideCounterChange.emit(index));
     }
 
     ngAfterViewInit() {
@@ -142,6 +146,7 @@ export class CarouselComponent implements OnDestroy {
 
     ngOnDestroy() {
         this.touches.destroy();
+        this.slideCounterChange$.complete();
     }
 
     initCarousel() {
@@ -156,7 +161,8 @@ export class CarouselComponent implements OnDestroy {
             minSwipeDistance: this.minSwipeDistance,
             transitionDuration: this.transitionDuration,
             transitionTimingFunction: this.transitionTimingFunction,
-            videoProperties: this.videoProperties
+            videoProperties: this.videoProperties,
+            slideCounterChange$: this.slideCounterChange$
         });
     }
 

src/app/carousel/carousel.ts

@@ -1,3 +1,5 @@
+import { Subject } from 'rxjs';
+
 export interface Properties {
     element: HTMLElement;
     container: HTMLElement;
@@ -10,6 +12,7 @@ export interface Properties {
     transitionDuration: number;
     transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
     videoProperties: any;
+    slideCounterChange$: Subject<number>;
 }
 
 export class Carousel {
@@ -444,6 +447,7 @@ export class Carousel {
 
         this.direction = undefined;
         this.slideLength = 0;
+        this.properties.slideCounterChange$.next(this.slideCounter);
     }
 
     resetTransition() {
@@ -530,4 +534,4 @@ export class Carousel {
     getCenterPositionIndex() {
         return (this.totalContainerCellsCount - 1) / 2;
     }
-}
+}