title: onScroll event triggers function in Angular4
body: <p>I am trying to display a paginated list, terefore, when the user scrolls down, I want to trigger a function that loads more items. But I cannot call the function on 'scroll' event.</p>
  
  <p>This is how my HTML doc looks like: </p>
  
  <pre><code>   &lt;div id="notifications-list"  (scroll)="scrollHandler($event)"  &gt;
         &lt;div class="row notification-row" *ngFor = "let notification of notifications" &gt; 
                  ...
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And in my .ts file, I have the following:</p>
  
  <pre><code>      import { Component, OnInit, ViewChild, ViewEncapsulation, AfterViewChecked, ElementRef,  HostListener  } from '@angular/core';
          @Component({
              selector: 'header-component',
              templateUrl: 'header.component.html',
              styleUrls: ['header.component.css'],
              encapsulation: ViewEncapsulation.None,
  
          })
  
          export class HeaderComponent implements OnInit {
           constructor( ...){}
  
  
    scrollHandler(event){
      console.log(event);
      console.log('now you are scrolling');
    }
  </code></pre>
  
  <p>But it won't work this way. Nothing is displayed in my console.
  I tried in many other ways, such as using the <code>@HostListener</code>, but it did't work:</p>
  
  <pre><code>@HostListener('window:scroll', ['$event']) 
      dotheJob(event) {
        console.debug("Scroll Event", window.pageYOffset );
      }
  </code></pre>
  
  <p>Can you help me with this issue? Thank you! :)</p>