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

 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>

No comments:

Post a comment

Thank You For Your Great Contribution

Featured Post

how to find duplicate item from array using multiple object keys in angular or javascript

 how to find duplicate item from array using multiple object keys There is a way to find based of multiple key find duplicate records in ang...

Popular Posts