ng-select - Large data set slow loading

Question

I am using the ng-select library for Angular 5 at version 1.4.2. I have a large data set of about 700 records. The data in my select drop down appears fine but appears after a few seconds only. Is there a way to make it appear quicker?

I have had a look into virtual scrolling. Is this an option? I also need to be able to do searching and in the demo at https://ng-select.github.io/ng-select#/virtual-scroll I am not sure if this works.

Here is the HTML for my select box:

<ng-select [items]="clients| async | orderBy : ['name']"
           [closeOnSelect]="true"
           [searchable]="true"
           bindValue="id.clientID"
           bindLabel="name"
           placeholder="Select a Client..."
           notFoundText=""
           [(ngModel)]="selectedClient"
           name="client">
</ng-select>

Here is my Angular component code that loads this data on initialization:

ngOnInit() {
    this.clients = this.clientService.getClients();
}

clients is defined as

clients: Observable<Client[]>;

Have you already tested the virtual scrolling you mentioned? For me it did the trick on a large data set, because it will not try to render all items at once. — Stephan Schrijver, Jun 05 '19 at 19:39
Virtual scrolling will make it so only a partial set of the data is being rendered to the DOM at once (so there aren't 700 items lagging out the browser that you can't even see). This could help so it's definitely worth trying. If you're call to `getClients()` is slow to return, then that could also be an issue. — abney317, Jun 05 '19 at 19:49
Not so far, tried Virtual scrolling. Will it work where [searchable]="true" and the item has not been loaded in the buffer? — sachman, Jun 06 '19 at 13:30
Yes virtual scrolling worked for me and also is searchable too. The search function searches your dataset, not what is rendered to DOM — NiallMitch14, Sep 20 '19 at 11:56

score 2 · Answer 1 · answered Dec 16 '22 at 12:45

Virtual scroll would definitely help to mitigate performance issues when ng-select contains thousands (or even more) of items.

Usage is following

<ng-select 
  [items]="yourItems"
  ...
  [virtualScroll]="true">
</ng-select>

There also might be a slowdown in populating your list of clients. Measure how long does this load take. If it takes too long, it would be good to load only first chunk of records and when user scrolls to the end load the next chunk. Use (scrollToEnd) event to detect user scrolled to the end.

In such case you need to implement dynamic search. Example can be found on https://stackblitz.com/run?file=src%2Fsearch-autocomplete-example.component.html

ng-select - Large data set slow loading

1 Answers1