1 files changed, 35 insertions, 0 deletions
diff --git a/src/angular/infinite-scroll/infinite-scroll.directive.ts b/src/angular/infinite-scroll/infinite-scroll.directive.ts
new file mode 100644
index 0000000..a8ea9f4
--- /dev/null
+++ b/src/angular/infinite-scroll/infinite-scroll.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, ElementRef, Output, EventEmitter, HostListener, Input } from "@angular/core";
+
+@Directive({
+    selector: '[infiniteScroll]'
+})
+export class InfiniteScrollDirective {
+    @Input() public infiniteScrollDistance: number = 0;
+    @Output() public infiniteScroll: EventEmitter<void>;
+
+    private scrollWasHit: boolean = false;
+
+    constructor(private elemRef: ElementRef) {
+        this.infiniteScroll = new EventEmitter<void>();
+    }
+
+    @HostListener('scroll', ['$event'])
+    public onScroll(evt) {
+        const scrollContainerElem: HTMLElement = evt.target;
+        if (scrollContainerElem !== this.elemRef.nativeElement) {
+            return;
+        }
+
+        if (scrollContainerElem.scrollTop + scrollContainerElem.clientHeight + this.infiniteScrollDistance >=
+            scrollContainerElem.scrollHeight) {
+            // hit only once when entering the distance area from bottom
+            // (avoid emitting the handler while scrolling in the bottom area)
+            if (!this.scrollWasHit) {
+                this.infiniteScroll.emit();
+                this.scrollWasHit = true;
+            }
+        } else if (this.scrollWasHit) {
+            this.scrollWasHit = false;
+        }
+    }
+}