scroll event on Hostlistener

Question

I have defined template

@Component({
    selector: 'name',
    directives: [ ... ],
    templateUrl: 'name.html'
})

and class

export class ProductGridComponent implements OnInit {
    @HostListener('scroll', ['$event'])
    onScroll(e) {
        alert(window.pageYOffset)
    }

    products = [];
}

But it does not shot anything , however when i replace scroll and onScroll with click and onClick it indeed show the alert.

Why does not it work with scroll , does angular2 has any other implementation for it?

Thanks

Answer 1

Assuming you want to display the host scroll (and not the windows one) and that you are using angular +2.1

  @HostListener('scroll', ['$event']) private onScroll($event:Event):void {
    console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
  };

Answer 2

You can create a custom directive like bellow

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[scroller]'
})
export class ScrollerDirective {

  @HostListener('scroll') scrolling(){
    console.log('scrolling');
  }

  @HostListener('click') clicking(){
    console.log('clicking...');
  }

  constructor() { }

}

And then assuming you have a html template like

<div class="full-width" scroller>
    <div class="double-width"></div>
</div>

use the following css

.full-width{
    width: 200px;
    height: 200px;
    overflow: auto;
}

.double-width{
    width:400px;
    height: 100%;
}

the console will print "scrolling" on running the app if you move the horizontal scroll bar.

Here the key is that - the scoller directive should be in the parent not in the child div.