Search code examples
angularangular-ngselect

Fired a event when scroll to down for dropdown


I want to fired a event when dropdown is scrolled to down. My .ts look like this

@HostListener('window:scroll', ['$event'])
     onWindowScroll(): void {
            let position = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
            let maximum = document.documentElement.scrollHeight;
            if(position >= maximum )   {
                console.log(document.body.className);
            }
      }

but it works for whole page not for dropdown My html looks like this

<ng-select #postCodeDD [items]="postCodes" bindLabel="displayName"
                                                bindValue="id" class="width-percent-100 scroll-event-fordropdown" name="CodeCode"
                                                placeholder="select postcode" appendTo="body"
                                                (change)="CodeChange($event)" [virtualScroll]="true"
                                                [selectOnTab]="true" [(ngModel)]="patientEntry.postCodeId">
                                            </ng-select>

Solution

  • You can use (scrollToEnd) event provided by the ng-select. For use that needs to enable virtual scroll like this [virtualScroll] = 'true'. Refer this: https://github.com/ng-select/ng-select