3

I am trying to bind Angular drop-down (Angular 4+) with 10000+ records, it's hanging the application, we are unable to perform any other operation post that.

I am just using *ngFor, for the same

 <select class="form-control browser-default col-md-12" name="attributeName" [(ngModel)]="attributeName">
      <option *ngFor="let item of typeArray" [ngValue]="item">
                {{item}}
       </option>
  </select>

I tried solutions like ng2-auto-complete and ng2-completer as well but when i start typing the app is hanging because the data is huge. Any other feasible solution?

programoholic
  • 4,830
  • 5
  • 20
  • 59
  • Use a `trackBy` on your `ngFor`, and try have a look at virtual scroll from material. Otherwise fix it on the server side by using an auto complete but use the server to query the data – Poul Kruijt Nov 27 '18 at 12:16
  • @PierreDuc Unfortunately we cant do anything from server side now . I need a mechanism by which i can imitate infinite scroll from client side only. – programoholic Nov 27 '18 at 12:19
  • 2
    `ng-select` is the best way we load 26000 data in drop down - which takes not even a second check this [https://ng-select.github.io/ng-select#/templates – Rahul Nov 27 '18 at 12:46
  • @RahulSwamynathan i'm trying.. could you tell me how do i bind array of string into the select ? – programoholic Nov 27 '18 at 13:09

1 Answers1

8

The component that you used were pretty useless. All of them had a change detection set to default and that makes them slow. Using a tip from @RahulSwamynathan I managed to get ng-select, it uses OpPush as a CD mechanism, to work and it is very fast. For testing, I used 26000 UUIDs and the slow down was unnoticeable. But what seems to make it work is the virtualScroll option set to true.

<ng-select [items]="arrayWithStrings" [virtualScroll]="true" [formControlName]="'name'"></ng-select>

If you want to have a styling that comes from the component you have to add @import "~@ng-select/ng-select/themes/default.theme.css"; in your style.css file.

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
piotr szybicki
  • 1,532
  • 1
  • 11
  • 12