Add scroll events to Angular.

[ ] bug report [x] feature request [ ] support request

Current behavior

I’ve done a research to find a functionality within Angular 2 framework to detect the vertical position of the scroll bar so I can trigger animations in certain breakpoints, but the only helpful solution was a work around using Renderer class. here is the code (toggle ‘shrink’ variable to active after 75px scrolled):

   constructor(private renderer: Renderer) {
    this.renderer.listenGlobal('window', 'scroll', (event) => { 
       this.shrink = (event.pageY>75 ? 'active' : 'inactive');
        });

the problem is that there is no built in functions for scroll events, moreover, the code above does the trick only on firefox web browser because the pageY attribute (contains the vertical position of the scroll bar in pixels) has a different name in the scroll event object given by the browsers other than firefox (event.pageY is undefined [Chrome/Edge]).

Expected behavior

Provide functionalities dedicated for scroll events that works with the majority of web browsers.

What is the motivation / use case for changing the behavior?

Scroll events are very useful especially when it comes to animations (sticky headers…).

My environment: Operating system: Windows 10 IDE: VS Code package manager: npm/yarn HTTP server: lite-server

• Angular version: 2.2.0

• Language: [all | TypeScript 2.0.3 | ES6/7 | ES5]

• Node (for AoT issues): node --version = 7.1

[zoechi]

@BigFax (click) listens only to click events of the element where you added it. (scroll) also listens only to the element where you add it. If you add (scroll) to a <div (scroll)="myScrollHandler($event)" it won’t be called when the window scrolls, only when the content of the div is scrolles. Perhaps you want <div (window:scroll)="myScrollHandler($event)"

[BigFax]

I mean : i can do (click)="myClickFunc()" but i can’t do (scroll)="myScrollFunc()" click is supported, not scroll. I need to do :

@HostListener('window:scroll', ['$event']) 
doSomething(event) {
   // ...
}

From : https://angular.io/docs/ts/latest/guide/user-input.html#!#binding-to-user-input-events

You can use Angular event bindings to respond to any DOM event.

List of DOM event : https://developer.mozilla.org/en-US/docs/Web/Events But they are not all “supported” as “click” is by default. Is there a specifc list of DOM event supported by Angular ?