adding ng2 property.

basically we don’t want the constructView function to fire for angular
to so that it can be called latter in ngAfterViewInit

Author: JoshDSommer

README.md

@@ -75,22 +75,25 @@ the `<Slides:SlideContainer>` element also has a property called `velocityScroll
 
 the `<Slides:SlideContainer>` element also has a property called `interval` which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call `page.getViewById("your_id").stopSlideshow()` to unregister it (your_id is the id given to `<Slides:SlideContainer>`), it can be restarted with `startSlidShow`.
 
+#### Angular 2 compatibility
+To use the slides with Angular2 and the `registerElement` from `nativescript-angular` you will want to set the `SlideContainer`'s property of `ng2` to `true`. Then in your angular component in the `ngAfterViewInit`. you will want to have an instance of your slide container to call the function `constructView()`.
+
 #### Android Optional Attributes
 - `androidTranslucentStatusBar`: boolean - If true, the Android status bar will be translucent on devices that support it. (Android sdk >= 19).
 - `androidTranslucentNavBar`: boolean - If true, the Android navigation bar will be translucent on devices that support it. (Android sdk >= 19).
 
-###Plugin Development Work Flow:
+#### Plugin Development Work Flow:
 
 * Clone repository to your machine.
 * Run `npm run setup` to prepare the demo project
 * Build with `npm run build`
 * Run and deploy to your device or emulator with `npm run demo.android` or `npm run demo.ios`
 
-###Known issues
+#### Known issues
 
   * There apears to be a bug with the loop resulting in bad transitions going right to left.
 
-### Smoother panning on Android (For {N} v2.0.0 and below __only__).
+#### Smoother panning on Android (For {N} v2.0.0 and below __only__).
 
 To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here
 

demo/app/main-page.xml

@@ -1,7 +1,7 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="pageLoaded">
 
 	<GridLayout rows="* auto">
-		<Slides:SlideContainer id="slides" row="0">
+		<Slides:SlideContainer id="slides" ng2="true" row="0">
 			<Slides:Slide class="slide-1">
 				<Label text="This is Panel 1"  />
 			</Slides:Slide>

nativescript-slides.d.ts

@@ -19,6 +19,7 @@ export declare class SlideContainer extends AbsoluteLayout {
     private _androidTranslucentStatusBar;
     private _androidTranslucentNavBar;
     private timer_reference;
+    private _ng2;
     hasNext: boolean;
     hasPrevious: boolean;
     interval: number;
@@ -27,6 +28,7 @@ export declare class SlideContainer extends AbsoluteLayout {
     androidTranslucentNavBar: boolean;
     velocityScrolling: boolean;
     pageWidth: number;
+    ng2: boolean;
     android: any;
     ios: any;
     constructor();

nativescript-slides.ts

@@ -42,6 +42,7 @@ export class SlideContainer extends AbsoluteLayout {
 	private _androidTranslucentStatusBar: boolean;
 	private _androidTranslucentNavBar: boolean;
 	private timer_reference: number;
+	private _ng2: boolean;
 
 	get hasNext(): boolean {
 		return !!this.currentPanel.right;
@@ -93,6 +94,14 @@ export class SlideContainer extends AbsoluteLayout {
 		return this._pageWidth;
 	}
 
+	get ng2(): boolean {
+		return this._ng2;
+	}
+
+	set ng2(value: boolean) {
+		this._ng2 = value;
+	}
+
 	get android(): any {
 		return;
 	}
@@ -122,10 +131,19 @@ export class SlideContainer extends AbsoluteLayout {
 		if (this._velocityScrolling == null) {
 			this._velocityScrolling = false;
 		}
+		if (this._ng2 == null) {
+			this._ng2 = false;
+		}
 
 	}
-	constructView(): void {
+
+	public constructView(): void {
 		this.setupDefaultValues();
+		// if being used in an ng2 app we want to prevent it from excuting the constructView
+		// until it is called manually in ngAfterViewInit.
+		if (this.ng2) {
+			return;
+		}
 
 		this.on(AbsoluteLayout.loadedEvent, (data: any) => {
 			if (!this._loaded) {