atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Directive, ElementRef, OnInit, NgZone, OnDestroy, Output, EventEmitter, Input } from '@angular/core';

import { Subject, Observable, Observer, fromEvent, Subscription } from 'rxjs';

import { takeUntil } from 'rxjs/operators';

import { coerceBooleanProperty } from 'ngx-tethys/util';

import { normalizePassiveListenerOptions } from '@angular/cdk/platform';

import { InputBoolean } from 'ngx-tethys/core';

/**

 * @name thyScroll

@Directive({

    private _destroyed = new Subject<void>();

    private _enable = true;

    private _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>

        this.ngZone.runOutsideAngular(() =>

            fromEvent(this.elementRef.nativeElement, 'scroll', passiveEventListenerOptions)

                .pipe(takeUntil(this._destroyed))

                .subscribe(observer)

        this._enable = coerceBooleanProperty(value);

        if (this._initialled) {

                this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));

            } else {

                    this._subscription = null;

            }

        }

    /**

     * @description

     * Note: the `thyOnScrolled` emits outside of the Angular zone since the `scroll` listener

     *

     * Consumers need to re-enter the Angular zone theirselves when the change detection is needeed to be run:

     * ```ts

     *   template: '<div thyScroll (thyOnScrolled)="onScrolled()"></div>'

     * })

     * class ThyScrollComponent {

     *   onScrolled(): void {

     *     console.log(NgZone.isInAngularZone()); // false

     *   }

     * }

     * ```

    @Output() thyOnScrolled: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    constructor(private elementRef: ElementRef<any>, private ngZone: NgZone) {}

    ngOnInit() {

        if (this._enable) {

            this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));

        }

        this._initialled = true;

    }

    ngOnDestroy() {

        this._destroyed.next();

        this._destroyed.complete();

    }

    getElementRef(): ElementRef<HTMLElement> {

        return this.elementRef;

    }

}