fix(virtual-scroll): working in angular

packages/angular/src/directives/virtual-footer.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+import { VirtualContext } from './virtual-utils';
+
+/**
+ * @hidden
+ */
+@Directive({selector: '[virtualFooter]'})
+export class VirtualFooter {
+  constructor(public templateRef: TemplateRef<VirtualContext>) {}
+}

packages/angular/src/directives/virtual-header.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+import { VirtualContext } from './virtual-utils';
+
+/**
+ * @hidden
+ */
+@Directive({selector: '[virtualHeader]'})
+export class VirtualHeader {
+  constructor(public templateRef: TemplateRef<VirtualContext>) {}
+}

packages/angular/src/directives/virtual-item.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
+import { VirtualContext } from './virtual-utils';
+
+/**
+ * @hidden
+ */
+@Directive({selector: '[virtualItem]'})
+export class VirtualItem {
+  constructor(public templateRef: TemplateRef<VirtualContext>, public viewContainer: ViewContainerRef) {}
+}

packages/angular/src/directives/virtual-scroll.ts

@@ -0,0 +1,54 @@
+import { EmbeddedViewRef, AfterContentInit, ContentChild, Directive, ElementRef, Input, IterableDiffers, TrackByFunction } from '@angular/core';
+import { VirtualItem } from './virtual-item';
+import { VirtualHeader } from './virtual-header';
+import { VirtualFooter } from './virtual-footer';
+import { VirtualContext } from './virtual-utils';
+
+@Directive({
+  selector: 'ion-virtual-scroll'
+})
+export class VirtualScroll {
+
+  @ContentChild(VirtualItem) itmTmp: VirtualItem;
+  @ContentChild(VirtualHeader) hdrTmp: VirtualHeader;
+  @ContentChild(VirtualFooter) ftrTmp: VirtualFooter;
+
+  constructor(private el: ElementRef) {
+    this.el.nativeElement.itemRender = this.itemRender.bind(this);
+  }
+
+  private itemRender(el: HTMLElement|null, cell: any, index?: number) {
+    if (!el) {
+      const node = this.itmTmp.viewContainer.createEmbeddedView(
+        this.getComponent(cell.type),
+        new VirtualContext(null, null, null),
+        index
+      );
+      el = getElement(node);
+      (el as any)['$ionView'] = node;
+    }
+    const ctx = (el as any)['$ionView'].context;
+    ctx.$implicit = cell.value;
+    ctx.index = cell.index;
+    return el;
+  }
+
+  private getComponent(type: number) {
+    switch(type) {
+      case 0: return this.itmTmp.templateRef;
+      case 1: return this.hdrTmp.templateRef;
+      case 2: return this.ftrTmp.templateRef;
+    }
+    return null;
+  }
+}
+
+function getElement(view: EmbeddedViewRef<VirtualContext>): HTMLElement {
+  const rootNodes = view.rootNodes;
+  for (var i = 0; i < rootNodes.length; i++) {
+    if (rootNodes[i].nodeType === 1) {
+      return rootNodes[i];
+    }
+  }
+  return null;
+}

packages/angular/src/directives/virtual-utils.ts

@@ -0,0 +1,14 @@
+
+export class VirtualContext {
+
+  constructor(public $implicit: any, public index: number, public count: number) { }
+
+  get first(): boolean { return this.index === 0; }
+
+  get last(): boolean { return this.index === this.count - 1; }
+
+  get even(): boolean { return this.index % 2 === 0; }
+
+  get odd(): boolean { return !this.even; }
+
+}

packages/angular/src/index.ts

@@ -2,6 +2,10 @@ export { IonicAngularModule } from './module';
 
 /* Directives */
 export { MenuToggle } from './directives/menu-toggle';
+export { VirtualScroll } from './directives/virtual-scroll';
+export { VirtualItem } from './directives/virtual-item';
+export { VirtualHeader } from './directives/virtual-header';
+export { VirtualFooter } from './directives/virtual-footer';
 
 /* Nav */
 export { IonNav } from './nav/ion-nav';

packages/angular/src/module.ts

@@ -18,6 +18,12 @@ import { TextValueAccessor } from './control-value-accessors/text-value-accessor
 /* Directives */
 import { MenuToggle } from './directives/menu-toggle';
 
+import { VirtualScroll } from './directives/virtual-scroll';
+import { VirtualItem } from './directives/virtual-item';
+import { VirtualHeader } from './directives/virtual-header';
+import { VirtualFooter } from './directives/virtual-footer';
+
+
 /* Providers */
 import { ActionSheetController } from './providers/action-sheet-controller';
 import { AlertController } from './providers/alert-controller';
@@ -37,7 +43,12 @@ import { ToastController } from './providers/toast-controller';
     NumericValueAccessor,
     RadioValueAccessor,
     SelectValueAccessor,
-    TextValueAccessor
+    TextValueAccessor,
+
+    VirtualScroll,
+    VirtualItem,
+    VirtualHeader,
+    VirtualFooter,
   ],
   exports: [
     BooleanValueAccessor,
@@ -45,7 +56,12 @@ import { ToastController } from './providers/toast-controller';
     NumericValueAccessor,
     RadioValueAccessor,
     SelectValueAccessor,
-    TextValueAccessor
+    TextValueAccessor,
+
+    VirtualScroll,
+    VirtualItem,
+    VirtualHeader,
+    VirtualFooter,
   ],
   imports: [
     CommonModule,