Angular 4 : Binding dropdown with huge data set(10000+ records)

Question

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?

Answer 1

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.