ngx-element-in-view/fesm2022/ngx-element-in-view.mjs

> 🔍 Angular directive to detect when an element enters the viewport using `IntersectionObserver`. Add animation classes or trigger callbacks with ease.

import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Directive } from '@angular/core';

class InViewDirective {
    el;
    renderer;
    animationClasses = ''; // Optional
    threshold = 0.1;
    triggerOnce = true;
    visibilityBeforeInView = true;
    inView = new EventEmitter();
    observer;
    hasAnimated = false;
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
    }
    ngOnInit() {
        // Hide initially (optional)
        if (!this.visibilityBeforeInView) {
            this.renderer.setStyle(this.el.nativeElement, 'visibility', 'hidden');
        }
        this.observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.intersectionRatio >= this.threshold && (!this.triggerOnce || !this.hasAnimated)) {
                    if (!this.visibilityBeforeInView) {
                        this.renderer.setStyle(this.el.nativeElement, 'visibility', 'visible');
                    }
                    if (this.animationClasses?.trim()) {
                        this.addClasses(); // Only add classes if provided
                    }
                    this.inView.emit(); // Always emit the event
                    this.hasAnimated = true;
                    if (this.triggerOnce) {
                        this.observer.unobserve(this.el.nativeElement);
                    }
                }
            });
        }, { threshold: this.threshold });
        this.observer.observe(this.el.nativeElement);
    }
    ngOnDestroy() {
        if (this.observer) {
            this.observer.disconnect();
        }
    }
    addClasses() {
        const classList = this.animationClasses.split(' ');
        classList.forEach(cls => {
            if (cls.trim()) {
                this.renderer.addClass(this.el.nativeElement, cls.trim());
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InViewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: InViewDirective, isStandalone: true, selector: "[ngxElementInView]", inputs: { animationClasses: ["ngxElementInView", "animationClasses"], threshold: "threshold", triggerOnce: "triggerOnce", visibilityBeforeInView: "visibilityBeforeInView" }, outputs: { inView: "inView" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InViewDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngxElementInView]'
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { animationClasses: [{
                type: Input,
                args: ['ngxElementInView']
            }], threshold: [{
                type: Input
            }], triggerOnce: [{
                type: Input
            }], visibilityBeforeInView: [{
                type: Input
            }], inView: [{
                type: Output
            }] } });

/*
 * Public API Surface of in-view
 */

/**
 * Generated bundle index. Do not edit.
 */

export { InViewDirective };
//# sourceMappingURL=ngx-element-in-view.mjs.map