title: Window scroll event using @HostListener not working
body: <p>I have problem making sticky header when scrolling down, in an Angular 4 application. Scroll event can't be detected.</p>
  
  <p>Header is placed in the layout component, and the content I want to be scrolling is placed in routes component. May that be the problem?</p>
  
  <p>This is the code I implemented.</p>
  
  <p><strong>In layout.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, HostListener, Inject } from '@angular/core';
  
  import { DOCUMENT } from "@angular/platform-browser";
  
  @Component({
  
    selector: 'app-layout',
  
    templateUrl: './layout.component.html',
  
    styleUrls: ['./layout.component.css']
  })
  
  export class LayoutComponent implements OnInit {
  
    public navIsFixed: boolean = false;
  
    constructor(public router: Router, @Inject(DOCUMENT) private document: any) { }
  
    @HostListener('window:scroll', [ ])
  
      onWindowScroll(){
        const number = window.pageYOffset || 
        document.documentElement.scrollTop || 
        document.body.scrollTop || 0;
        if (number &gt; 50) {
          this.navIsFixed = true;
        } else if (this.navIsFixed &amp;&amp; number &lt; 10) {
        this.navIsFixed = false;
        }
      }
  }
  </code></pre>
  
  <p><strong>In layout.component.html</strong></p>
  
  <pre><code>&lt;div [class.fixed]="navIsFixed" class="header"&gt;
  </code></pre>