Update demo for grouping and item sticky elements

ionic/components/item/test/groups/component-list.html

@@ -0,0 +1,17 @@
+<ion-list>
+  <ion-item-group class="outer-content">
+    <ion-item-group-title>
+      {{data.day}} - Sessions
+    </ion-item-group-title>
+    <ion-item-sliding *ng-for="#session of data.sessions">
+      <h3>{{session.name}}</h3>
+      <p>
+        <span>{{session.location}}</span>
+      </p>
+      <ion-item-options>
+        <button primary>Speaker Info</button>
+        <button secondary>Add to <br>Favorites</button>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+</ion-list>

ionic/components/item/test/groups/index.ts

@@ -1,31 +1,42 @@
-import {Host} from 'angular2/angular2';
-import {App} from 'ionic/ionic';
+import {ElementRef, Host} from 'angular2/angular2';
 import {Component, View, NgIf, NgFor} from 'angular2/angular2';
-import {Content, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic';
-
-
-console.log('content', Content)
+import {App, Content, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic';
 
 @Component({
   properties: ['data'],
-  selector: 'component-list'
-})
-@View({
-  directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, List, NgIf, NgFor],
-  templateUrl: 'list.html'
+  selector: 'component-list',
+  directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
+  templateUrl: 'component-list.html'
 })
 class ComponentList {
-  constructor(@Host() content:Content) {
+  constructor(elementRef: ElementRef, @Host() content:Content) {
     console.log('Component List init', content);
   }
 }
 
 @App({
-  directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, List, NgIf, NgFor],
+  directives: [Content, ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
   templateUrl: 'main.html'
 })
 class E2EApp {
   constructor() {
-    this.data = ['1'];
+    let session = {
+      "name": "Breakfast",
+      "location": "Main hallway"
+    };
+
+    this.data = {
+      "day": "05/17/2016",
+      "sessions": [
+        {
+          "name": "Breakfast",
+          "location": "Main hallway"
+        }
+      ]
+    };
+
+    for(let i = 0; i < 50; i++) {
+      this.data.sessions.push(session);
+    }
   }
 }

ionic/components/item/test/groups/list.html

@@ -1,19 +0,0 @@
-<ion-content class="outer-content">
-<ion-list>
-  <ion-item-group class="outer-content" *ng-for="#timeSlot of data">
-    <ion-item-group-title>
-      {{timeSlot.time}}
-    </ion-item-group-title>
-    <ion-item *ng-for="#session of timeSlot.talks">
-      <h3>{{session.name}}</h3>
-      <p>
-        <span>{{session.location}}</span>
-      </p>
-      <ion-item-options>
-        <button primary (click)="openSession(session, $this)">Speaker Info</button>
-        <button secondary (click)="addFavorite(timeSlot, session, $event)">Add to <br>Favorites</button>
-      </ion-item-options>
-    </ion-item>
-  </ion-item-group>
-</ion-list>
-</ion-content>

ionic/components/item/test/groups/main.html

@@ -1,7 +1,4 @@
-<ion-content class="outer-content">
-  <div *ng-if="data.length > 0">
-    <component-list [data]="data"></component-list>
-  </div>
-  <div *ng-if="data.length == 0"><h4>No Items</h4></div>
-
+<ion-content class="outer-content content-selected">
+  <h4>Component List</h4>
+  <component-list [data]="data"></component-list>
 </ion-content>