events - EventEmitter does not work on Chrome/Safari

Question

I created (with lots of help), the following directive, where I am tracking Y position of a screen and firing an event with this information.

import {Directive, Output, EventEmitter} from "angular2/core";

@Directive({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'},

})

export class TrackScrollDirective {
    @Output('pageYPositionChange') pageYPositionChange: EventEmitter<any> = new EventEmitter();


    track($event: any) {
        this.pageYPositionChange.emit($event.pageY);
    }
}

And trying to listen to that event in a component:

import {TrackScrollDirective} from "../directives/track-scroll.directive";

@Component({
    selector: 'app-header',
    moduleId: module.id,
    templateUrl: './app-header.component.html',
    directives: [Collapse, DROPDOWN_DIRECTIVES, ROUTER_DIRECTIVES, TrackScrollDirective]
})

export class AppHeader {
    public isCollapsed:boolean = false;

    pageY: number = 0;

    constructor (
        public authService: AuthenticationService
    ) {}

    onPageYChange(pageY: number) {
        this.pageY = pageY;
        console.debug("PageY Pos ", pageY );
    }
}

where in the template of that component we have as follows:

<nav class="navbar navbar-default navbar-fixed-top top-navbar" track-scroll (pageYPositionChange)="onPageYChange($event)" [ngClass]="{floating: pageY > 10}">

Everything works beautifully in FF, but that's about it, nowhere else. (tried safari, chrome)

What is missing? My only thought is that I am using the wrong EventEmitter

UPDATE

Apparently $event.pageY does not exist in chrome... and in fact there is no information about page position at all. Where do I get it from?

Answer 1

https://plnkr.co/edit/3EIMK6?p=preview

import {EventEmitter, HostListener, Component, Directive, Output} from 'angular2/core'

@Directive({
  selector: '[track-scroll]',
  // host: {'(window:scroll)': 'track($event)'},
})
export class TrackScrollDirective {
  @Output() pageYPositionChange:EventEmitter<any> = new EventEmitter();

  constructor() {
    console.log('TrackScrollDirective');
  }

  @HostListener('window:scroll', ['$event'])
  track(event:any) {
    this.pageYPositionChange.emit(document.body.scrollTop);
  }
}

@Component({
  selector: 'app-header',
//  moduleId: module.id,
  template: `xxx
  <div class="container-fluid" track-scroll (pageYPositionChange)="onPageYChange($event)">
      <div class="row">
          <div class="col-md-12">
              <app-header></app-header>
              <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
          </div>
      </div>
  </div>
  `,
  directives: [TrackScrollDirective]
})
export class AppHeader {
  public isCollapsed:boolean = false;

  pageY:number = 0;

  constructor(/*public authService:AuthenticationService*/) {
    console.log('AppHeader');
  }

  onPageYChange(pageY:number) {
    this.pageY = pageY;
    console.debug("PageY Pos ", pageY);
  }
}

@Component({
  selector: 'my-app',
  directives: [AppHeader],
  template: `
  <h2>Hello</h2>
  <app-header></app-header>
  <div style="height: 200vh; border: 5px solid red;"></div>
`
})
export class App {
}