on scroll load more p-tree nodes angular-CodePudding

We have large records that needs to be shown in and hence I am trying to implement on scroll append more data to . But , I am not able to reach the debugger in my directive. Can someone help me to trigger the scroll event on reaching bottom? is there any other way to capture scroll event on so that I can improve the performance of my page?

explore.component.html

<div style="overflow: auto !important;height: 488px !important;" scrollTracker  (scrollingFinished)="onScrollingFinished()">
<p-tree [value]="files | filter:searchText" selectionMode="single" [(selection)]="selectedFiles"
(onNodeSelect)="nodeSelect($event)" (onNodeExpand)="expandNode($event)"  ></p-tree>
</div>

explore.component.ts:

@Output() scrollingFinished = new EventEmitter<void>();
 


onScrollingFinished() {
this.scrollingFinished.emit();
}

directive:

import { Directive, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
@Output() scrollingFinished = new EventEmitter<void>();

emitted = false;

@HostListener("window:scroll", [])
onScroll(): void {
debugger;
if ((window.innerHeight   window.scrollY) >= document.body.offsetHeight && !this.emitted) {
this.emitted = true;
this.scrollingFinished.emit();
} else if ((window.innerHeight   window.scrollY) < document.body.offsetHeight) {
this.emitted = false;
}
}
}

CodePudding user response：

You should alway listen to the event on the element where the scroll event is been triggered.

In your case you should listen on scroll event on your scrollable div which is in your template the div where you have used your scrollTracker directive.

To do this you should replace window:scroll with scroll event on the target element which is the scrollable div in this case. In your onScroll method

constructor(private element: ElementRef) {}

@HostListener('scroll', ['$event'])
public onScroll(event) {
    let element = this.element.nativeElement;
    if (element.scrollTop   element.clientHeight   50 > element.scrollHeight) {
        // reached the bottom 
    }
}