test(slides): update slides tests with new API and add new one

references #5508

ionic/components/slides/test/controller/index.ts

@@ -0,0 +1,52 @@
+import {ViewChild} from 'angular2/core';
+import {App, Slides} from 'ionic-angular';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class MyApp {
+  mySlideOptions: any;
+  @ViewChild(Slides) slider: Slides;
+
+  constructor() {
+    console.log("here");
+    this.mySlideOptions = {
+      initialSlide: 1,
+      autoplay: 1000
+    };
+  }
+
+  ngAfterViewInit() {
+
+  }
+
+  onSlideChanged() {
+    console.log("Slide Changed");
+    let isEnd = this.slider.isEnd();
+    console.log("This is the last slide?", isEnd);
+  }
+
+  goToPrevSlide() {
+    this.slider.slidePrev(5000, false);
+  }
+
+  goToNextSlide() {
+    this.slider.slideNext();
+  }
+
+  goToSlide(index) {
+    console.log(index);
+    this.slider.slideTo(index, 500, false);
+  }
+
+  getIndex() {
+    let index = this.slider.getActiveIndex();
+    console.log("Current Index is", index);
+  }
+
+  getLength() {
+    let length = this.slider.length();
+    console.log("Current Length is", length);
+  }
+}

ionic/components/slides/test/controller/main.html

@@ -0,0 +1,16 @@
+<ion-slides [options]="mySlideOptions" (didChange)="onSlideChanged()">
+  <ion-slide padding>
+    <p>Slide 1</p>
+    <button block (click)="goToSlide(3)">Navigate to 3rd Slide</button>
+    <button block (click)="getLength()">Get Slide Length</button>
+  </ion-slide>
+  <ion-slide padding>
+    <p>Slide 2</p>
+    <button block (click)="goToPrevSlide()">Navigate Back</button>
+    <button block (click)="goToNextSlide()">Navigate Forward</button>
+  </ion-slide>
+  <ion-slide padding>
+    <p>Slide 3</p>
+    <button block (click)="getIndex()">Get Index</button>
+  </ion-slide>
+</ion-slides>

ionic/components/slides/test/intro/main.html

@@ -8,7 +8,7 @@
 </ion-navbar>
 
 <ion-content>
-  <ion-slides pager [options]="mySlideOptions" (change)="onSlideChanged($event)" (slideChangeStart)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
+  <ion-slides pager [options]="mySlideOptions" (didChange)="onSlideChanged($event)" (willChange)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
     <ion-slide>
       <h3>Thank you for choosing the Awesome App!</h3>
       <div id="logo">

ionic/components/slides/test/loop/index.ts

@@ -35,7 +35,10 @@ class MyApp {
 
   onSlideChanged(slider: Slides) {
     console.log('Slide changed', slider);
-    console.log("active index", slider.activeIndex);
+  }
+
+  ngAfterViewInit() {
+    console.log(this.loopSlider);
   }
 
 }

ionic/components/slides/test/loop/main.html

@@ -1,5 +1,5 @@
 <div class="slides-div">
-  <ion-slides [options]="myTopSlideOptions" #loopSlider (change)="onSlideChanged($event)" pager>
+  <ion-slides [options]="myTopSlideOptions" #loopSlider (didChange)="onSlideChanged($event)" pager>
     <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
       Loop {{ slide.name }}
     </ion-slide>
@@ -8,7 +8,7 @@
 
 
 <div class="slides-div">
-  <ion-slides (change)="onSlideChanged($event)" pager>
+  <ion-slides (didChange)="onSlideChanged($event)" pager>
     <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
       Don't Loop {{ slide.name }}
     </ion-slide>