Return ui-scroll modules

src/app/app.component.ts

@@ -3,30 +3,29 @@ import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   private title = 'app works!';
   private test: Boolean = true;
 
   private datasource = {
-    list: [1,2,3,4,5,6,7,8,9]
-    // test: [1,2,3,4,5,6,7,8,7,6,5,4,3,2,1,0],
-    // get: (index: number, count: number) => Observable.create(observer => {
-    //   console.log('requested index = ' + index + ', count = ' + count);
-    //   setTimeout(() => {
-    //     let data = [];
-    //     for (let i = index; i <= index + count - 1; i++) {
-    //       data.push({
-    //         id: i,
-    //         text: "item #" + i
-    //       });
-    //     }
-    //     console.log('resolved ' + data.length + ' items (index = ' + index + ', count = ' + count + ')');
-    //     observer.next(data);
-    //   }, 50);
-    // })
+    // list: [1,2,3,4,5,6,7,8,9]
+    test: [1,2,3,4,5,6,7,8,7,6,5,4,3,2,1,0],
+    get: (index: number, count: number) => Observable.create(observer => {
+      console.log('requested index = ' + index + ', count = ' + count);
+      setTimeout(() => {
+        let data = [];
+        for (let i = index; i <= index + count - 1; i++) {
+          data.push({
+            id: i,
+            text: "item #" + i
+          });
+        }
+        console.log('resolved ' + data.length + ' items (index = ' + index + ', count = ' + count + ')');
+        observer.next(data);
+      }, 50);
+    })
   };
 
   constructor() {

src/app/app.module.ts

@@ -11,9 +11,7 @@ import { UiScrollDirective } from './ui-scroll-directive/ui-scroll.directive';
     UiScrollComponent,
     UiScrollDirective
   ],
-  imports: [
-    BrowserModule
-  ],
+  imports: [BrowserModule],
   entryComponents: [UiScrollComponent],
   bootstrap: [AppComponent]
 })

src/app/app.component.css → src/app/ui-scroll-directive/ui-scroll.component.css

@@ -1,7 +1,7 @@
-.viewport {
-  width: 200px;
-  height: 120px;
-  overflow-anchor: none;
-  overflow-y: auto;
-  display: block;
-}
+:host {
+  width: 200px;
+  height: 120px;
+  overflow-anchor: none;
+  overflow-y: auto;
+  display: block;
+}

src/app/ui-scroll-directive/ui-scroll.component.html

@@ -1,21 +1,21 @@
 <div data-padding-top></div>
-<div *ngFor="let item of datasource.list">
+<!-- <div *ngFor="let item of datasource.list">
   <ng-template
     [ngTemplateOutlet]="templateVariable"
     [ngTemplateOutletContext]="{
       $implicit: item
    }">
   </ng-template>
-</div>
-<!-- <div *ngFor="let item of getItems()" id="{{getItemId(item.$index)}}">
+</div> -->
+<div *ngFor="let item of getItems()" id="{{getItemId(item.$index)}}">
   <div [style.position]="item.invisible ? 'fixed' : null" [style.left]="item.invisible ? '-99999px' : null" >
     <ng-template
       [ngTemplateOutlet]="templateVariable"
       [ngTemplateOutletContext]="{
-        item: item.scope,
+        $implicit: item.$index,
         index: item.$index
      }">
     </ng-template>
   </div>
-</div> -->
+</div>
 <div data-padding-bottom></div>

src/app/ui-scroll-directive/ui-scroll.component.ts

@@ -15,7 +15,8 @@ import Data from './modules/data';
 @Component({
   selector: 'ui-scroll',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './ui-scroll.component.html'
+  templateUrl: './ui-scroll.component.html',
+  styleUrls: [`./ui-scroll.component.css`]
 })
 export class UiScrollComponent implements OnInit, OnDestroy {
 
@@ -30,17 +31,14 @@ export class UiScrollComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    // Elements.initialize(this.elementRef);
-    // Data.initialize(this);
-    // Workflow.initialize(this);
-    // this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) =>
-    //   debouncedRound(() => Workflow.run(event), 25)
-    // );
-    // Workflow.run(Direction.bottom);
-    // Workflow.run(Direction.top);
-    // console.log(this);
-    // console.log(this.elementRef.nativeElement.innerHTML.trim());
-    // console.log(this.templateVariable);  // Here should be info from app.component.html..?
+    Elements.initialize(this.elementRef);
+    Data.initialize(this);
+    Workflow.initialize(this);
+    this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) =>
+      debouncedRound(() => Workflow.run(event), 25)
+    );
+    Workflow.run(Direction.bottom);
+    Workflow.run(Direction.top);
   }
 
   ngOnDestroy() {