wip

examples/src/app/app.component.css

@@ -58,11 +58,15 @@
   background-color: goldenrod;
 }
 
-.test1 {
+.test1,
+.ngxisc {
   height: 300px;
   overflow: auto;
   width: 500px;
 }
+.ngxisc {
+  background-color: skyblue;
+}
 /* .test2 .content {
   display: flex;
 } */

examples/src/app/test.inner.ts

@@ -7,24 +7,39 @@ import { ListService } from "./list.service";
   selector: "test-inner",
   providers: [ListService],
   template: `
-    <div class="{{className}}"
-        [scrollWindow]="scrollWindow"
-         infiniteScroll
-         [infiniteScrollContainer]="selector"
-         [fromRoot]="fromRoot"
-         [infiniteScrollDistance]="scrollDistance"
-         [infiniteScrollUpDistance]="scrollUpDistance"
-         [infiniteScrollThrottle]="throttle"
-         (scrolled)="onScrollDown()"
-         (scrolledUp)="onUp()"
-      >
+    <div
+      class="{{ className }}"
+      [scrollWindow]="scrollWindow"
+      infiniteScroll
+      [infiniteScrollContainer]="selector"
+      [fromRoot]="fromRoot"
+      [infiniteScrollDistance]="scrollDistance"
+      [infiniteScrollUpDistance]="scrollUpDistance"
+      [infiniteScrollThrottle]="throttle"
+      (scrolled)="onScrollDown()"
+      (scrolledUp)="onUp()"
+    >
       <section class="content">
         <div *ngFor="let i of array()">
           {{ i }}
         </div>
       </section>
     </div>
-  `
+    <ngx-infinite-scroll-container
+      infiniteScroll
+      [infiniteScrollDistance]="scrollDistance"
+      [infiniteScrollUpDistance]="scrollUpDistance"
+      [infiniteScrollThrottle]="throttle"
+      (scrolled)="onScrollDown()"
+      (scrolledUp)="onUp()"
+    >
+      <section class="content">
+        <div *ngFor="let i of array()">
+          {{ i }}
+        </div>
+      </section>
+    </ngx-infinite-scroll-container>
+  `,
 })
 export class TestInnerComponent {
   @Input() scrollWindow = true;
@@ -49,7 +64,7 @@ export class TestInnerComponent {
     // }, 3000);
   }
 
-  onUp(ev?:any) {
+  onUp(ev?: any) {
     // setTimeout(() => {
     console.log(`scrolled up, from  ${this.className} ${this.info}`);
     this.listMaker.setDirectionUp();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-infinite-scroll",
-  "version": "10.0.0",
+  "version": "10.0.9-next",
   "description": "An infinite scroll directive for Angular",
   "main": "./bundles/ngx-infinite-scroll.umd.js",
   "module": "./modules/ngx-infinite-scroll.es5.js",

src/modules/infinite-scroll-container.component.ts

@@ -0,0 +1,50 @@
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+} from '@angular/core';
+import { IInfiniteScrollEvent } from '../models';
+
+@Component({
+  selector: 'ngx-infinite-scroll-container',
+  template: ` <div
+    class="ngxisc"
+    infiniteScroll
+    [infiniteScrollDistance]="infiniteScrollDistance"
+    [infiniteScrollThrottle]="infiniteScrollThrottle"
+    [infiniteScrollContainer]="infiniteScrollContainer"
+    [immediateCheck]="immediateCheck"
+    [alwaysCallback]="alwaysCallback"
+    [scrollWindow]="false"
+    [fromRoot]="fromRoot"
+    (scrolled)="onScroll()"
+  >
+    <ng-content></ng-content>
+  </div>`,
+})
+export class InfiniteScrollComponent {
+  @Output() scrolled = new EventEmitter<IInfiniteScrollEvent>();
+  @Output() scrolledUp = new EventEmitter<IInfiniteScrollEvent>();
+
+  @Input() infiniteScrollDistance: number = 2;
+  @Input() infiniteScrollUpDistance: number = 1.5;
+  @Input() infiniteScrollThrottle: number = 150;
+  @Input() infiniteScrollDisabled: boolean = false;
+  @Input() infiniteScrollContainer: any = '';
+  @Input() scrollWindow = false;
+  @Input() immediateCheck: boolean = false;
+  @Input() horizontal: boolean = false;
+  @Input() alwaysCallback: boolean = false;
+  @Input() fromRoot: boolean = false;
+
+  @HostBinding('style.display') get display() {
+    return 'block';
+  }
+
+  onScroll() {
+    this.scrolled.emit();
+  }
+  // constructor() { }
+}

src/modules/infinite-scroll.directive.ts

@@ -8,16 +8,19 @@ import {
   OnChanges,
   OnDestroy,
   Output,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
-import {Subscription} from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import { IInfiniteScrollEvent, IInfiniteScrollAction } from '../models';
 import { hasWindowDefined, inputPropChanged } from '../services/ngx-ins-utils';
-import { createScroller, InfiniteScrollActions } from '../services/scroll-register';
+import {
+  createScroller,
+  InfiniteScrollActions,
+} from '../services/scroll-register';
 
 @Directive({
-  selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]'
+  selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]',
 })
 export class InfiniteScrollDirective
   implements OnDestroy, OnChanges, AfterViewInit {
@@ -37,7 +40,7 @@ export class InfiniteScrollDirective
 
   private disposeScroller: Subscription;
 
-  constructor(private element: ElementRef, private zone: NgZone) { }
+  constructor(private element: ElementRef, private zone: NgZone) {}
 
   ngAfterViewInit() {
     if (!this.infiniteScrollDisabled) {
@@ -45,12 +48,18 @@ export class InfiniteScrollDirective
     }
   }
 
-  ngOnChanges({ infiniteScrollContainer, infiniteScrollDisabled, infiniteScrollDistance }: SimpleChanges) {
+  ngOnChanges({
+    infiniteScrollContainer,
+    infiniteScrollDisabled,
+    infiniteScrollDistance,
+  }: SimpleChanges) {
     const containerChanged = inputPropChanged(infiniteScrollContainer);
     const disabledChanged = inputPropChanged(infiniteScrollDisabled);
     const distanceChanged = inputPropChanged(infiniteScrollDistance);
-    const shouldSetup = (!disabledChanged && !this.infiniteScrollDisabled) ||
-      (disabledChanged && !infiniteScrollDisabled.currentValue) || distanceChanged;
+    const shouldSetup =
+      (!disabledChanged && !this.infiniteScrollDisabled) ||
+      (disabledChanged && !infiniteScrollDisabled.currentValue) ||
+      distanceChanged;
 
     if (containerChanged || disabledChanged || distanceChanged) {
       this.destroyScroller();
@@ -73,8 +82,10 @@ export class InfiniteScrollDirective
           scrollContainer: this.infiniteScrollContainer,
           scrollWindow: this.scrollWindow,
           throttle: this.infiniteScrollThrottle,
-          upDistance: this.infiniteScrollUpDistance
-        }).subscribe((payload: any) => this.zone.run(() => this.handleOnScroll(payload)));
+          upDistance: this.infiniteScrollUpDistance,
+        }).subscribe((payload: any) =>
+          this.zone.run(() => this.handleOnScroll(payload))
+        );
       });
     }
   }

src/modules/ngx-infinite-scroll.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
+import { InfiniteScrollComponent } from './infinite-scroll-container.component';
 
 import { InfiniteScrollDirective } from './infinite-scroll.directive';
 
 @NgModule({
-  declarations: [InfiniteScrollDirective],
-  exports: [InfiniteScrollDirective],
+  declarations: [InfiniteScrollDirective, InfiniteScrollComponent],
+  exports: [InfiniteScrollDirective, InfiniteScrollComponent],
   imports: [],
-  providers: []
+  providers: [],
 })
-export class InfiniteScrollModule { }
+export class InfiniteScrollModule {}

src/ngx-infinite-scroll.ts

@@ -4,8 +4,9 @@ export {
   IInfiniteScrollEvent,
   IPositionElements,
   IPositionStats,
-  IResolver
+  IResolver,
 } from './models';
 
 export { InfiniteScrollDirective } from './modules/infinite-scroll.directive';
+export { InfiniteScrollComponent } from './modules/infinite-scroll-container.component';
 export { InfiniteScrollModule } from './modules/ngx-infinite-scroll.module';

src/services/scroll-register.ts

@@ -18,19 +18,20 @@ export function createScroller(config: Models.IScroller) {
       scrollWindow,
       element,
       fromRoot
-    )
+    ),
   });
   const scrollState = new ScrollState({
-    totalToScroll: calculatePoints(element, resolver)
+    totalToScroll: calculatePoints(element, resolver),
   });
   const options: Models.IScrollRegisterConfig = {
     container: resolver.container,
-    throttle: config.throttle
+    throttle: config.throttle,
   };
   const distance = {
     up: config.upDistance,
-    down: config.downDistance
+    down: config.downDistance,
   };
+  debugger;
   return attachScrollEvent(options).pipe(
     mergeMap(() => of(calculatePoints(element, resolver))),
     map((positionStats: Models.IPositionStats) =>
@@ -84,13 +85,13 @@ export function toInfiniteScrollParams(
   return {
     scrollDown,
     fire,
-    stats
+    stats,
   };
 }
 
 export const InfiniteScrollActions = {
   DOWN: '[NGX_ISE] DOWN',
-  UP: '[NGX_ISE] UP'
+  UP: '[NGX_ISE] UP',
 };
 
 export function toInfiniteScrollAction(
@@ -98,12 +99,12 @@ export function toInfiniteScrollAction(
 ): Models.IInfiniteScrollAction {
   const {
     scrollDown,
-    stats: { scrolled: currentScrollPosition }
+    stats: { scrolled: currentScrollPosition },
   } = response;
   return {
     type: scrollDown ? InfiniteScrollActions.DOWN : InfiniteScrollActions.UP,
     payload: {
-      currentScrollPosition
-    }
+      currentScrollPosition,
+    },
   };
 }