Angular директива бесконечной прокрутки не вызывается

Question

Я создал директиву прокрутки, чтобы проверять, прокручивается ли представление, оно должно загружать больше данных (часть загрузки данных работает). К сожалению, мой метод onScroll никогда не вызывается. Вот мой код для моей директивы:

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

 @Directive({
 // tslint:disable-next-line:directive-selector
selector: '[scrollable]'
})
export class ScrollableDirective {

@Output() scrollPosition = new EventEmitter();

constructor(public el: ElementRef) { }

 @HostListener('scroll', ['$event'])
 onScroll(event) {
try {

  const top = event.target.scrollTop;
  const height = this.el.nativeElement.scrollHeight;
  const offset = this.el.nativeElement.offsetHeight;

  // emit bottom event
  if (top > height - offset - 1) {
    this.scrollPosition.emit('bottom');
  }

  // emit top event
  if (top === 0) {
    this.scrollPosition.emit('top');
  }

} catch (err) {}
}

}

Я реализовал эту директиву в своем импорте в моем app.module.

вот как я ее называю:

<div class="content" scrollable (scrollPosition)="scrollHandler($event)">

и вот мой компонент:

scrollHandler(e) {
  console.log('called', e);
}