Detect scroll event from inner div

Question

I want to be able to detect events when scrolling from a scrollable inner div not just a window target.

For example i have a Directive which listen for scroll events, here I need to change ' host: '(window:scroll)' to something else.

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

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

export class InfiniteScrollerDirective {
  @Output() scrolled = new EventEmitter();

  track(event: Event) {
    this.scrolled.emit({
        value: event
    });
  }
}

I use it in my component as infinite-scroll directive with "scrolled" output.

<div infinite-scroll (scrolled)="onScroll($event.value)">
  <table class="table">
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>...

And event goes here.

 onScroll(event: UIEvent) {

 }

Answer 1

I'm not sure why everyone here is trying to mess with the @HostListener. It is definitely required when working with page level events, but not child elements. Instead of going with JQuery style event binding, you can use Angular 2 event listeners. If you're working with an inner-div, all you need to do is add the scroll event listener on your div with a callback method like the following:

HTML:

<div (scroll)="onScroll($event)">

</div>

TypeScript:

onScroll(event): void {

    // Interpret the scroll event
    // Do stuff on inner div scroll
}