How to auto load data on mat-select scroll (mat-select infinite scroll)

step1 :Install plugins

npm i ng-mat-select-infinite-scroll

reference side:

https://dev.to/haidarz/adding-infinite-scroll-functionality-to-angular-material-select-component-1lho

step2:declare path 

import { BehaviorSubject, Observable } from 'rxjs';

import { scan } from 'rxjs/operators';

step3:declare variables

limit = 10;

offset = 0;

options = new BehaviorSubject<string[]>([]);

options$: Observable<string[]>;

 

step4:call observable on constructor

this.options$ = this.options.asObservable().pipe(

scan((acc, curr) => {

return [...acc, ...curr];

}, [])

);

step5:call method when require for initialise like on init()

this.getTapCodeList();

step6:write defination of method

getNextBatch() {

    const result = this.tapCodeList.slice(this.offset, this.offset + this.limit);

    this.options.next(result);

    this.offset += this.limit;

  }

  

step7:api call for data

 getTapCodeList(): Promise<any> {

    return new Promise((resolve, reject) => {

      const _tradingEntityID = this.newTradeIOTForm.get('TradingEntityID').value;

      this.tadigcodeservice.getTadigCode(_tradingEntityID, '00000000-0000-0000-0000-000000000000', 'All', this.userId)

        .then(res => {

          const _tempData = res.result.AllTadigCode;

          if (_tempData) {

            this.tapCodeList = _tempData.map(function (ele) {

              return { 'TadigId': ele.TadigId, 'TadigCode': ele.TadigCode };

            });

          }

          this.getNextBatch();

        })

        .catch(error => {

          this.loggerService.error(error);

        });

      this.counterPartyList = [];

      return resolve(this.tapCodeList);

    });

  }

step 8: html side changes

                <div class="full-width space-grp ">

                      <mat-form-field class="full-width">

                        <mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" multiple

                          formControlName="CounterPartyTapCode" [complete]="offset === data?.length"

                          (selectionChange)="changeTapCode($event, true)">

                          <mat-option *ngFor="let option of options$ | async" [value]="option.TadigId">

                            {{option.TadigCode}}</mat-option>

                        </mat-select>

                        <mat-placeholder>Select TAP Code<span class="raw-red">*</span>

                        </mat-placeholder>

                      </mat-form-field>

                    </div>