feat(infiniteScroll): add infinite scroll

Closes #5415

ionic/components/infinite-scroll/test/basic/index.ts

@@ -0,0 +1,49 @@
+import {App, InfiniteScroll} from 'ionic-angular';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  items = [];
+
+  constructor() {
+    for (var i = 0; i < 30; i++) {
+      this.items.push( this.items.length );
+    }
+  }
+
+  doInfinite(infiniteScroll: InfiniteScroll) {
+    console.log('Begin async operation');
+
+    getAsyncData().then(newData => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.push( this.items.length );
+      }
+
+      console.log('Finished receiving data, async operation complete');
+      infiniteScroll.endLoading();
+
+      if (this.items.length > 90) {
+        infiniteScroll.enable(false);
+      }
+    });
+  }
+
+}
+
+function getAsyncData() {
+  // async return mock data
+  return new Promise(resolve => {
+
+    setTimeout(() => {
+      let data = [];
+      for (var i = 0; i < 30; i++) {
+        data.push(i);
+      }
+
+      resolve(data);
+    }, 500);
+
+  });
+}

ionic/components/infinite-scroll/test/basic/main.html

@@ -0,0 +1,18 @@
+<ion-toolbar><ion-title>Infinite Scroll</ion-title></ion-toolbar>
+
+<ion-content>
+
+  <ion-list>
+    <ion-item *ngFor="#item of items">
+      {{ item }}
+    </ion-item>
+  </ion-list>
+
+  <ion-infinite (infinite)="doInfinite($event)" threshold="100px">
+    <ion-infinite-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-content>
+  </ion-infinite>
+
+</ion-content>