Infinite scroll not working in old Nebular site

I have a website which is based on an old version of ngx-admin (Nebular) which i am assuming version 2.1.0.

the new nebular documentation does not seem to apply to my website, so i am trying to add an infinite loop functionality using ngx-infinite-scroll, but the scroll event is not fired.

my example which i try to apply is taken from (https://stackblitz.com/edit/ngx-infinite-scroll?file=src%2Fapp%2Fapp.module.ts)

my component:

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

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

Any hints how i can get the scroll event to fire?

Well, finally i got it.

the tricky part of ngx-admin was to findout that one needs to add withScroll="false" to nb-layout in the theme file.

then in the component file this is what worked for me:

  @HostListener("window:scroll", ["$event"])
  onWindowScroll() {
    //In chrome and some browser scroll is given to body tag
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      console.log("scrolled");
    }
 }

How to detect scroll to bottom of html element

maybe this will help someone