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?

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
`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

score 8 · Accepted Answer · edited Feb 16 '21 at 13:33

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.

edited Feb 16 '21 at 13:33

Lakshya Thakur

8,030
1
12
39

answered Nov 27 '18 at 20:53

piotr szybicki

1,532
1
11
12

does it support angular 4 ? When i imported the module, i got this error : SCRIPT5007: Object expected – programoholic Nov 28 '18 at 07:30
what browser did you use? It looks like something that browser would throw. – piotr szybicki Nov 28 '18 at 07:44
IE 11 is the browser . and my array is like : ["a","a","a","a","a","a","a"........]; – programoholic Nov 28 '18 at 07:47

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

1 Answers1