test(slides): update to use @ViewChild

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

@@ -1,20 +1,23 @@
-import {App, IonicApp} from 'ionic-angular';
+import {ViewChild} from 'angular2/core';
 import {Http} from 'angular2/http';
+import {App, Slides} from 'ionic-angular';
+
 
 @App({
   templateUrl: 'main.html'
 })
 class MyApp {
-  constructor(app: IonicApp, http: Http) {
-    this.app = app;
-    this.http = http;
+  mySlideOptions: any;
+  images: string[] = [];
+  @ViewChild(Slides) slider: Slides;
 
+  constructor(private http: Http) {
     this.mySlideOptions = {
       loop: true
     };
+  }
 
-    this.images = [];
-
+  ngAfterViewInit() {
     let tags = "amsterdam";
     let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
 
@@ -27,24 +30,15 @@ class MyApp {
         setTimeout(() => {
           this.slider.update();
         });
+
     }, (err) => {
       console.info('Unable to load images');
       console.error(err);
-    })
-  }
-
-  ngOnInit() {
-    setTimeout(() => {
-      this.slider = this.app.getComponent('slider');
-      console.log('Got slider', this.slider);
     });
   }
 
   getImageUrl(item) {
-    return "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
+    return `http://farm${item.farm}.static.flickr.com/${item.server}/${item.id}_${item.secret}_z.jpg`;
   }
 
-  doRefresh() {
-    console.log('DOREFRESH')
-  }
 }

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

@@ -20,9 +20,7 @@ class IntroPage {
   startingIndex: number = 1;
   mySlideOptions;
 
-  constructor(nav: NavController) {
-    this.nav = nav;
-
+  constructor(private nav: NavController) {
     this.mySlideOptions = {
       paginationClickable: true,
       lazyLoading: true,

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

@@ -1,12 +1,16 @@
-import {App, IonicApp} from 'ionic-angular';
+import {ViewChild} from 'angular2/core';
+import {App, Slides} from 'ionic-angular';
 
 @App({
   templateUrl: 'main.html'
 })
 class MyApp {
-  constructor(app: IonicApp) {
-    this.app = app;
+  slides: any[];
+  @ViewChild('loopSlider') loopSlider: Slides;
+  startingIndex: number;
+  myTopSlideOptions: any;
 
+  constructor() {
     this.slides = [
       {
         name: "Slide 1",
@@ -22,23 +26,16 @@ class MyApp {
       }
     ];
 
-    this.startingIndex = 2;
-
     this.myTopSlideOptions = {
-      index: this.startingIndex,
+      initialSlide: 2,
       loop: true
     };
+
   }
 
-  onSlideChanged(slider) {
+  onSlideChanged(slider: Slides) {
     console.log('Slide changed', slider);
     console.log("active index", slider.activeIndex);
   }
 
-  ngOnInit() {
-    setTimeout(() => {
-      this.slider = this.app.getComponent('loopSlider');
-      console.log('Got slider', this.slider);
-    });
-  }
 }

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

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