How to make HostListener for scroll work?

Question

I'm trying to add a window:scroll listener but when scrolling nothing happens

What I've tried so far:

using host inside component decorator

@Component({
  ...
  host: {
    'window:scroll' : 'onWindowScroll($event)'
  },
  ...
)
export class PageWrapperComponent implements OnInit {
  ...
  public onWindowScroll(event: Event): void {
    console.log('scrolled');
  }
  ...
}

using HostListener inside component decorator

export class PageWrapperComponent implements OnInit {
  ...
  @HostListener('window:scroll', ['$event'])
  public onWindowScroll(event: Event): void {
    console.log('scrolled');
  }
  ...
}

I also tried using it in an attribute directive but it didn't work either

Neither will trigger the console log. I've searched for similar questions in SO but even though my code is essentially the same it still doesn't work.

Answer 1

Using host inside component decorator

it should be:

'(window:scroll)' : 'onWindowScroll($event)'

Plunker Example

Using HostListener inside component decorator Your syntax looks correct

@HostListener('window:scroll', ['$event'])
public onWindowScroll(event: Event): void {
  console.log('scrolled');
}

Plunker Example

You can also make sure that your component has scroll. In my examples i imitate scroll via:

styles: [`
    :host {
      display: block;
      height: 2000px;
    }
`]