How to detect scroll event on angular material 2 autocomplete list using CdkScrollable

I'm trying to use cdkScrollable to listenScrollEvent on mat-autocomplete.

I have implemented like below code snippets.

<mat-form-field>
  <input matInput placeholder="Notebook Page" formControlName="notebookPage" [matAutocomplete]="NBPageAutocomplete" >
</mat-form-field>
<mat-autocomplete  #NBPageAutocomplete="matAutocomplete" cdkScrollable >
  <mat-option  *ngFor="let option of suggestedNBPageNames" [value]="option">
                
  </mat-option>
</mat-autocomplete>

constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
    this.scroll.scrolled().subscribe((data: CdkScrollable) => {
       console.log(data);
      //make an HTTP call when it reaches to the end, to add some more data
    });
  }

The event was not firing after subscribing to this.scroll.scrolled().

I have been struct on this issue from past few days, didn't find any related info online.

Please help me.

from How to detect scroll event on angular material 2 autocomplete list using CdkScrollable