title: How to make HostListener for scroll work?
body: <p>I'm trying to add a <code>window:scroll</code> listener but when scrolling nothing happens</p>
  
  <p>What I've tried so far:</p>
  
  <p><strong>using <code>host</code> inside component decorator</strong></p>
  
  <pre><code>@Component({
    ...
    host: {
      'window:scroll' : 'onWindowScroll($event)'
    },
    ...
  )
  export class PageWrapperComponent implements OnInit {
    ...
    public onWindowScroll(event: Event): void {
      console.log('scrolled');
    }
    ...
  }
  </code></pre>
  
  <p><strong>using <code>HostListener</code> inside component decorator</strong></p>
  
  <pre><code>export class PageWrapperComponent implements OnInit {
    ...
    @HostListener('window:scroll', ['$event'])
    public onWindowScroll(event: Event): void {
      console.log('scrolled');
    }
    ...
  }
  </code></pre>
  
  <p><strong>I also tried using it in an attribute directive but it didn't work either</strong></p>
  
  <p>Neither will trigger the <code>console log</code>. I've searched for similar questions in SO but even though my code is essentially the same it still doesn't work. </p>