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 Dynamic Upload multiple files with extra detail of model in asp.net core

 How To Dynamic Upload multiple files with extra detail of model in asp.net core  1). firstly create Model File  namespace MyModel {     pub...

Popular Posts