3

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>
Ian
  • 321
  • 6
  • 16
  • 1
    My first thought is how effective is it to have a dropdown with 12,000 items in it? If its a requirement, then I understand, I've been there. But is it possible that you use an autocomplete instead? That'll probably be way easier to use than having the user scroll through 11,999 items to find the 1 they are looking for. https://material.angular.io/components/autocomplete/overview – Damian C Oct 19 '19 at 17:09
  • its the rendering that is taking up all that time. I would suggest you look into angular infinite scrolling solutions. – Michael Kang Oct 19 '19 at 17:13
  • @shadowfox476 I need to implement autocomplete with api call, and in the documentation there is only local list to be searched. Do you have or Can you suggest some links for that purpose instead? I think of implementing it by first call api and save the data in a list. And then do as shown by documentation. Is that good way or there are other better approach? Any suggestions please – Ian Oct 19 '19 at 17:18
  • I'd just pull the entire list from the api and follow their example. Otherwise your api will have to support filtering based on the current value in the input – Damian C Oct 19 '19 at 17:29

2 Answers2

2

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.

wentjun
  • 40,384
  • 10
  • 95
  • 107
0

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.

MaBbKhawaja
  • 842
  • 10
  • 16