How to receive the scroll events of MatDialog in Angular

Question

I have a fixed side nav with links that get highlighted when a particular div in the body is scrolled into view. This functionality works fine, but I need to get this working in an material modal window(MatDialog) that scrolls along with the content. I am not able to access the scroll event of the Modal window within the 'DialogOverviewExampleDialog' component.

Answer 1

Instructions

Make sure that overflow on the parent is set to auto and the child element should have overflow: scroll and add the cdkScrollable directive to the parent

Hint: Of course you can also modify the overflow behaviour of the mat-dialog container in order to achieve the result you need. Its just important that you can see a scrollable content in the part you want to listen to.

component.html:

<div class="main-wrapper" cdkScrollable>
  <div class="sub-content"></div>
</div>

component.css:

.main-wrapper {
   overflow: auto;
}

.sub-content {
  overflow: scroll;
}

module.ts:

 imports: [ScrollingModule] 

component.ts:

constructor(public scrollDispatcher: ScrollDispatcher) {
      this.scrollDispatcher.scrolled().subscribe((event: CdkScrollable) => {
          console.log(event)
          //do more stuff with the event
       });
    }

Full documentation HERE!