Angular 7 scroll event does not fire

Question

For implementing a spy nav bar in my Angular app in a MatDialog component. I implemented a directive to spy for the scroll event using

@HostListener('window:scroll', ['$event'])

I also tried 'scroll' as event name. But the event does not seem to fire. I tried several approaches, e. g. by using the HostListener directly in the dialog component, by using the JavaScript window.onscroll() function and the rxjs fromEvent() function but without success.

Trying other css events (e. g. window:click) work fine. I also tried it in a "normal" component that is not displayed as a dialog but the event is not fired there either.

What could be the cause of this behaviour?

Answer 1

The reason for this behaviour is that angular material blocks the scroll event.

I solved it like this:

  ngAfterViewInit(): void {

    const content = document.querySelector('.mat-dialog-container');
    const scroll$ = fromEvent(content, 'scroll').pipe(map(() => content));

    scroll$.subscribe(element => {
      // do whatever
    });
  }