Can ngx-infinite-scroll work with mat-select / mat-option

[mcbashie]

Please let me know if this is the wrong place to ask questions like this. I will take it to stackoverflow instead.

I have been tasked with searching for an alternative for ng-mat-select-infinite-scroll, because currently that is not working correctly with Angular V15 and legacy Angular-Material components.

Can you tell me if ngx-infinite-scroll could work with mat-select / mat-option? I have given it a try but so far with no success. The (scrolled) procedure is never called. I have noticed that there is a nested scrollbar (see screenshot), which is likely why it's not working.

<mat-select panelClass="lazyloadselector" [formControl]="appselect" [complete]="offset === tempOptions.length" (openedChange)="openChanged($event)" [disabled]="disabled" (selectionChange)="selectionChangedTrigger($event)"> <mat-option unselectable="on" [disabled]="true" class="searchselect" *ngIf="showSearchField"> <input label="Sneltoets ALT+S" class="mat-select-search" type="text" (keyup)="onKeyUp($event)" placeholder="Zoeken..." #input (keydown.space)="$event.stopPropagation()"> </mat-option> <div class="search-results" infiniteScroll infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="150" (scrolled)="scrollDown()"> <mat-option *ngFor="let option of tempInfiniteScrollOptions" [value]="option.value">{{option.viewValue}} </mat-option> </div> </mat-select>

Thanks&Regards, Nell

[maciWils]

Hello! I suggest you look into mat-autocomplete for this. Please refer to this. Hope this helps!