mat autocomplete is too slow while loading large data

Question

I am using mat autocomplete https://material.angular.io/components/autocomplete/api in my angular project. while loading large data with 25k items. the performance gets low. it is too slow to search and suggest autocomplete. how to increase the performance of this?

Answer 1

I was in the same situation and my solution was to limit the list to first N results. So the code looks like this:

component.html

<mat-autocomplete #auto="matAutocomplete" [displayWith]="name">
    <mat-option *ngFor="let item of filteredItems" [value]="item">
        {{item.name}}
    </mat-option>
</mat-autocomplete>

component.ts

this.filteredItems = this.items.filter(...some.filtering here...).slice(0, 10);

You will be filtering all items, but showing only first 10 matching. ;-)

Answer 2

If data is huge in autocomplete then performance low, I have resolved the same issue using *cdkVirtualFor replaces *ngFor inside autocomplete.

please find references below.

https://stackblitz.com/edit/autocomplete-with-virtual-scroll?file=app%2Fcdk-virtual-scroll-overview-example.ts

Answer 3

I would recommend to load less data to your autocomplete . But if you really need to display/search this many items. The solution to your problem is virtual scroll.https://material.angular.io/cdk/scrolling/overview Because the filter function depending on the filter function you are using the most time is used by repainting it. Or a simpler solution but uses a bit more resource than virtual scroll . https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878