ElementScrolled Event is not being fired with CdkScrollable and mat-side-nav - scroll

Question

I have the following DOM Configuration
<div class="sticky-nav-wrapper">
<app-header (notificationClick)="notificationData=$event; sidenav.toggle()"></app-header>
</div>
<mat-sidenav-container>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
<mat-sidenav #sidenav mode="over">
<app-notifications [notificationData]="notificationData" [opened]="sidenav.opened" (notificationItemClick)="sidenav.close()"></app-notifications>
</mat-sidenav>
</mat-sidenav-container>
In my app-notification component which is inside mat-sidenav, I want to listen to the scroll. Following is my template for app-notification
<div class="class-notification-container" cdkScrollable>
<div *ngIf="notifications && notifications.length > 0">
<div *ngFor="let item of notifications">
<div class="class-notification" [ngClass]="{'class-notification-new': item.localStatus === 'new','class-notification-old': item.localStatus === 'seen'}" (click)="onNotificationClick(item)">
<app-avatar [imageId]="item?.fromUser?.id"></app-avatar>
</div>
<mat-divider></mat-divider>
</div>
</div>
</div>
In my app-notification.ts:
#ViewChild(CdkScrollable) notificationContainer: CdkScrollable;
and
ngAfterViewInit(): void {
this.notificationContainer.elementScrolled()
.subscribe((scrollPosition) => {
this.ngZone.run(() => {
if (!this.endOfNotifications) {
this.pageNumber = this.pageNumber + 1;
this.getNotifications();
}
});
}, (error) => {});
}
However, this subscription is never invoked, no matter how much I scroll inside the mat-side-nav. The docs says that the CdkScrollable directive emits an observable on host elemnet scroll.
Returns observable that emits when a scroll event is fired on the host
element.
The other alternative is to listen to the scrollDispatcher. The issue however is scrolldispatcher is sending events on window scroll and not specifically on side-nav scroll.
I seem to be doing everything OK as per the doc. Can someone please suggest where the things are going wrong. I specifically want to listen to the scroll of my component within the side-nav i.e. app-notification component. Also I do not want to listen to the window scroll or to say the mat-side-nav-content scroll.

Answer 1

It may be you're listening on too high of a parent.
Have you tried listening on the div with the *ngFor ?
<div >
<div *ngIf="notifications && notifications.length > 0">
<div class="class-notification-container" cdkScrollable *ngFor="let item of notifications">
<div class="class-notification" [ngClass]="{'class-notification-new': item.localStatus === 'new','class-notification-old': item.localStatus === 'seen'}" (click)="onNotificationClick(item)">
<app-avatar [imageId]="item?.fromUser?.id"></app-avatar>
</div>
<mat-divider></mat-divider>
</div>
</div>
</div>