How to capture the scroll to bottom event in Angular 8

I am creating a page using angular component. The html file has html elements and *ngFor . The page has list of 20 products. When the user scroll to the end of page , I need to make a server call and load next 20 products.

I am creating a responsive UI and using chrome (as mobile UI) to test angular 8 application

Is there any sample code to refer for this functionality.

enter code here

  @HostListener('scroll', ['$event'])
  scrollHandler(event) {
    console.debug("Scroll Event");

  scroll = (): void => {
    //let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight

    //console.log("scrooling" + atBottom);
    //handle your scroll here
    //notice the 'odd' function assignment to a class field
    //this is used to be able to remove the event listener