How to detect scroll event in mat-list in Angular

Question

I have a mat-list element defined like so:

<mat-list #wholeList class="syslog__list">
    <ng-container *ngFor="let entry of filteredLogs; let i = index">
      <mat-list-item>
      .
      .
      .

and so I can access it in my .ts file if needs be with:

@ViewChild('wholeList') wholeList: any;

How can I detect when the user scrolls the list?

Answer 1

You can use (scroll)="onScroll($event)" on your mat-list to handle the scroll events.

<mat-list #wholeList class="syslog__list" (scroll)="onScroll($event)">
 <ng-container *ngFor="let entry of filteredLogs; let i = index">
   <mat-list-item>
   .
   .
   .

By using (scroll)="onScroll($event)" on the mat-nav list, every time the user scrolls past this mat-list, the onScroll method will be called, which allows to handle event scrolling and perform all desired actions in Angular component.

Working Stackblitz