[FIXED] on scroll load more p-tree nodes angular

Issue

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;
}
}
}

Solution

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 
    }
}

Answered By – Mehyar Sawas

Answer Checked By – Robin (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published