Бесконечная прокрутка не работает на старом сайте Nebular

У меня есть веб-сайт, основанный на старой версии ngx-admin (Nebular), которую я предполагаю версии 2.1.0.

новая документация nebular, похоже, не применима к моему веб-сайту, поэтому я пытаюсь добавить функцию бесконечного цикла с помощью ngx-infinite-scroll, но событие scroll не запускается.

мой пример, который я пытаюсь применить, взят из (https://stackblitz.com/edit/ngx-infinite-scroll?file=src%2Fapp%2Fapp.module.ts)

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

//our root app component
import { Component } from "@angular/core";


@Component({
  selector: "my-app",
  styleUrls: ["./test.component.scss"],
  templateUrl: "./test.component.html"
})
export class TestComponent {
  array = [];
  sum = 100;
  throttle = 300;
  scrollDistance = 1;
  scrollUpDistance = 2;
  direction = "";
  modalOpen = false;

    constructor() {
      console.log("constructor!!");
    this.appendItems(0, this.sum);
  }

  addItems(startIndex, endIndex, _method) {
    for (let i = 0; i < this.sum; ++i) {
      this.array[_method]([i, " ", this.generateWord()].join(""));
    }
  }

  appendItems(startIndex, endIndex) {
    this.addItems(startIndex, endIndex, "push");
  }

  prependItems(startIndex, endIndex) {
    this.addItems(startIndex, endIndex, "unshift");
  }

  onScrollDown(ev) {
    console.log("scrolled down!!", ev);

    // add another 20 items
    const start = this.sum;
    this.sum += 20;
    this.appendItems(start, this.sum);

    this.direction = "down";
  }

  onUp(ev) {
    console.log("scrolled up!", ev);
    const start = this.sum;
    this.sum += 20;
    this.prependItems(start, this.sum);

    this.direction = "up";
  }
  generateWord() {
    return "Test Word";
  }

  toggleModal() {
    this.modalOpen = !this.modalOpen;
  }
}

мой HTML:

<h1 class="title well">
    ngx-infinite-scroll v-{{nisVersion}}
    <section>
    <small>items: {{sum}}, now triggering scroll: {{direction}}</small>
    </section>
    <section>
      <button class="btn btn-info">Open Infinite Scroll in Modal</button>
    </section>
  </h1>
  <div class="search-results"
        infinite-scroll
        [infiniteScrollDistance]="scrollDistance"
        [infiniteScrollUpDistance]="scrollUpDistance"
        [infiniteScrollThrottle]="throttle"
        (scrolled)="onScrollDown()"
        (scrolledUp)="onUp()" style="height:100%">
    <p *ngFor="let i of array">
      {{ i }}
    </p>
  </div>

Любые подсказки, как я могу запустить событие прокрутки?