Значение scrollHeight не определено?

Я новичок в Angular и хотел реализовать Бесконечная прокрутка, но мои значения scrollHeight не определены. Я использую ElementRef из @angular/core. Вот мой код.

@Input() eachElementHeightInPx = 20;
@Input() fetchThreshold = 5;
private element: HTMLElement = this.elementRef.nativeElement;

constructor(private elementRef: ElementRef) { }

@HostListener('scroll', ['$event'])
onScrollContainer($event: any) {
    console.info('scrollContainer');
    console.info('scrollHeight ' + this.element.scrollHeight); // it is undefined idk why!!.
    console.info(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.info('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
    }
}

Вот снимок моей функции на тот случай, если приведенный выше код не запутывает. Кликните сюда. Пожалуйста, объясните способы, которыми не включать jQuery. Спасибо.

ОБНОВЛЕНИЕ: ОЧЕНЬ МИНИМАЛЬНОЕ ВОСПРОИЗВЕДЕНИЕ STACKBLITZhttps://stackblitz.com/edit/angular-qngk3b