Interaction with Image and remove unused imports

README.md

@@ -42,7 +42,10 @@ npm install nativescript-ng2-carousel --save
 
 3. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:
 <pre>
-&lt;GridLayout [carousel]="images" carouselLabelOverlay="true" carouselSpeed="2000"&gt;
+&lt;GridLayout [carousel]="images"
+               carouselLabelOverlay="true"
+               carouselSpeed="2000"
+               (selectedImageChange)="select($event)"&gt;
 
 &lt;/GridLayout&gt;
 </pre>
@@ -135,6 +138,7 @@ Currently directive supported attributes:
 * **carouselAnimationSpeed** _(optional)_ defines the animation speed (number in ms)
 * **carouselArrows** _(optional)_ arrow type, accepted values _none_, _small_, _normal_, _bold_ or _narrow_ (default _normal_)
 * **carouselLabelOverlay** _(optional)_ silde title over image, accepted values _true_ or _false_ (default false)
+* **selectedImageChange** _(optional)_ get the title of the selected image (key)
 
 ## Changelog
 

nativescript-ng2-carousel.ts

@@ -3,14 +3,10 @@ import {AnimationCurve} from "ui/enums";
 import {Image} from "ui/image";
 import {StackLayout} from "ui/layouts/stack-layout";
 import {GridLayout, ItemSpec} from "ui/layouts/grid-layout";
-import {GridUnitType} from "ui/layouts/grid-layout";
-import {HorizontalAlignment} from "ui/enums";
 import {Label} from "ui/label";
 import {GestureTypes} from "ui/gestures";
 import {View} from "ui/core/view";
-import {Visibility} from "ui/enums";
-import {fromFile} from "image-source";
-import {fromResource} from "image-source";
+import {fromFile, fromResource} from "image-source";
 
 @Directive({selector: '[carousel]'})
 export class CarouselDirective implements AfterViewInit {
@@ -40,6 +36,8 @@ export class CarouselDirective implements AfterViewInit {
     @Input() carouselLabelOverlay: boolean; // title over image (bool)
     @Input() carouselAnimationSpeed: number; // animation speed
 
+    @Output() selectedImageChange: EventEmitter<string> = new EventEmitter<string>();
+
     constructor(private elem: ElementRef) {
         this.container = elem.nativeElement;
     }
@@ -128,16 +126,25 @@ export class CarouselDirective implements AfterViewInit {
 
             if (slide.url) {
                 let image: Image = CarouselDirective.generateImageSliderFromUrl(slide.url);
+                image.on(GestureTypes.tap, () => {
+                    this.selectedImageChange.emit( slide.title );
+                });
                 gridLayout.addChild(image);
             }
 
             if (slide.file && slide.file.indexOf('res://') !== 0) {
                 let image: Image = CarouselDirective.generateImageSliderFromFile(slide.file);
+                image.on(GestureTypes.tap, () => {
+                    this.selectedImageChange.emit( slide.title );
+                });
                 gridLayout.addChild(image);
             }
 
             if (slide.file && slide.file.indexOf('res://') === 0) {
                 let image: Image = CarouselDirective.generateImageSliderFromResource(slide.file);
+                image.on(GestureTypes.tap, () => {
+                    this.selectedImageChange.emit( slide.title );
+                });
                 gridLayout.addChild(image);
             }