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

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

2. 
  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
  };