scroll event on Hostlistener

Question

I have defined template

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

and class

Answer 1

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

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.