25 lines
618 B
TypeScript
25 lines
618 B
TypeScript
import {Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
|
|
|
|
@Directive({selector: '[inView]'})
|
|
export class InViewDirective implements OnInit, OnDestroy {
|
|
@Output() inView = new EventEmitter<void>();
|
|
private observer!: IntersectionObserver;
|
|
|
|
constructor(private el: ElementRef) {}
|
|
|
|
ngOnInit() {
|
|
this.observer = new IntersectionObserver(([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
this.inView.emit();
|
|
this.observer.disconnect();
|
|
}
|
|
}, {rootMargin: '200px'});
|
|
|
|
this.observer.observe(this.el.nativeElement);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.observer.disconnect();
|
|
}
|
|
}
|