From d7f481bf4c00934f6c8363483895ab9d25c134e1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 15 Dec 2015 18:43:00 -0500
Subject: [PATCH] test(slides): adding slides test for loop with a ngFor

references #751
---
 ionic/components/slides/test/loop/index.ts  | 37 +++++++++++++++++++++
 ionic/components/slides/test/loop/main.html | 19 +++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 ionic/components/slides/test/loop/index.ts
 create mode 100644 ionic/components/slides/test/loop/main.html

diff --git a/ionic/components/slides/test/loop/index.ts b/ionic/components/slides/test/loop/index.ts
new file mode 100644
index 0000000000..cd4956465e
--- /dev/null
+++ b/ionic/components/slides/test/loop/index.ts
@@ -0,0 +1,37 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+class MyApp {
+  constructor(app: IonicApp) {
+    this.app = app;
+
+    this.slides = [
+      {
+        name: "Slide 1",
+        class: "yellow"
+      },
+      {
+        name: "Slide 2",
+        class: "red"
+      },
+      {
+        name: "Slide 3",
+        class: "blue"
+      }
+    ];
+  }
+
+  onSlideChanged(slider) {
+    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);
+    });
+  }
+}
diff --git a/ionic/components/slides/test/loop/main.html b/ionic/components/slides/test/loop/main.html
new file mode 100644
index 0000000000..625d492e7b
--- /dev/null
+++ b/ionic/components/slides/test/loop/main.html
@@ -0,0 +1,19 @@
+<ion-slides loop="true" id="loopSlider" (slideChanged)="onSlideChanged($event)" pager>
+  <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
+    {{ slide.name }}
+  </ion-slide>
+</ion-slides>
+
+<style>
+  .yellow {
+    background-color: #fbeb14;
+  }
+
+  .red {
+    background-color: #ED4337;
+  }
+
+  .blue {
+    background-color: #89cff0;
+  }
+</style>