Infinite scroll not working in old Nebular site - angular5

Question

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?

Answer 1

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