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:

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()


step6:write defination of method

getNextBatch() {

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

    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 = (ele) {

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





        .catch(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">



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




1 comment:

  1. Woori Casino -
    The first slot machine on the market, Woori 우리 카지노 총판 Casino's 더킹 카지노ventureberg Woori casino sporting100 is a perfect destination for fun. Players choose from dozens 메리트 카지노 도메인 of machines and 더킹카지노 주소


Thank You For Your Great Contribution

Featured Post

how to find n number of nodes have child or cildren

 how to find n number of nodes have child or cildren for that we use recursive function  const   data = {     'id' : '0' ,...

Popular Posts