Performance issue for huge data in mat-option angular 6

user_9908867 0
Viewed 5826

I have used Material approach for dropdown menu for my vendor data. There are more than 12000 i.e. 12k + data in vendor. Using mat-option, I need to use *ngFor which takes hell of time. This makes my app very slow and unresposive like hanging. What can be the efficient solutions for this? The solution may be for drop down or different other approaches.

<mat-form-field fxFlex.gt-sm>
   <mat-label>Vendor</mat-label>
      <mat-select formControlName="VendorId">
         <mat-option *ngFor="let vendor of vendorData" [value]="vendor.VendorId">
                  {{ vendor.VendorName }}
         </mat-option>
       </mat-select>       
</mat-form-field>
angular-material angular
2 Answers

The main reason for the unresponsiveness and slowness is because the component is trying to render all 12,000 node elements on the DOM.

I would recommend you to implement some sort of infinite scrolling logic such that only a certain amount of nodes are rendered at a particular scroll position when scrolling through the mat-select options.

Here are the following ways in which you can achieve it:

1) Installing the ng-mat-select-infinite-scroll package. Until Angular Material has implemented its own native infinite scrolling capabilities within the mat-select component, this package would be the most straightforward way of implementing infinite scrolling for mat-select.

2) If you do not wish to install another third party library, you can refer to this answer. The person who answered that question has a decent implementation of the infinite scroll for mat-select.

user_109599400

Well this is not a front end issue and you can achieve it on front end by infinite scroll but I would suggest you to handle it on back end use redis server or some other memory management tool I hope that will work in this case.

user_119994130
Related