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>
Woori Casino - AprCasino.com
ReplyDeleteThe 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 더킹카지노 주소