Htykuut

I'm new to Angular and wanted to implement Infinite Scroll, but my values of scrollHeight is undefined.I'm using ElementRef from @angular/core.Here's my code.

@Input() eachElementHeightInPx = 20;

@Input() fetchThreshold = 5;

private element: HTMLElement = this.elementRef.nativeElement;



constructor(private elementRef: ElementRef) { }



@HostListener('scroll', ['$event'])

onScrollContainer($event: any) {

    console.log('scrollContainer');

    console.log('scrollHeight ' + this.element.scrollHeight); // it is undefined idk why!!.

    console.log(typeof (this.element[0]));

    if (this.element.scrollHeight > this.lastCheckedHeight) {

        this.previousScrollHeight = this.element.scrollHeight;

        let remainingHeight = this.element.scrollHeight -

            (this.element.offsetHeight + this.element.scrollTop);

        let remainingElement = Math.ceil(remainingHeight /

            this.eachElementHeightInPx);

        if (remainingElement < this.fetchThreshold) {

            this.lastCheckedHeight = this.element.scrollHeight;

            // this.fetchMore.emit();

            console.log('emitting');

        }

    } else if (this.element.scrollHeight < this.previousScrollHeight) { // To check if the list is reloaded

        this.previousScrollHeight = this.element.scrollHeight;

        this.lastCheckedHeight = 0;

        this.element.scrollTop = 0; // Scroll the list to top

    }

}

Here's my function snapshot just in case the above code is not lill confusing.
Click Here.
Please explaing ways that do not include jQuery.Thanks.

UPDATE:VERY MINIMAL STACKBLITZ REPRODUCTION
https://stackblitz.com/edit/angular-qngk3b