Problem in loading large data in select Tag in an Angular project

user_4981637 0
Viewed 416

After calling an HTTP request and getting a bunch of data(around 14000) without any problem from the server I have a problem loading these amount in my Select Tag and it makes all the page so slow the select Tag is exactly like below:

<ng-container *ngIf = "merchantTitle!=null">
            <select #merchantId="ngModel" class="form-control" name="merchantId" [(ngModel)]="clubDiscountContractReportModel.merchantId" style="margin-right: 28px;" (change)="onMerchantChange($event.target.value)">
              <option *ngFor="let merchant of merchantTitle" [value]="merchant.merchantId" [selected]="clubDiscountContractReportModel.merchantId == merchant.merchantId">
                {{ merchant.merchantTitle }}
              </option>
            </select>
          </ng-container>

any idea if there is any problem with my Select Tag or any better idea to handle this problem of loading data slowly in UI?

angular typescript http
1 Answers

Having 14000 data items is nothing to worry about, but when putting them in an *ngFor it lets them get loaded into the DOM, which is why your page is so slow. A lot of premade dropdown solutions provide something called virtual scrolling. This will only load in the items you actually see on the screen and will dynamically load more of the 14000 while you scroll through all the items, so your DOM will not be cramped. Implementing this yourself in a plain HTML select will require some Googling on your part.

user_106954950
Related