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?

load less data... and only the necessary data. don't load entire objects if you only need a name, and don't load everything if you only need items that start with 'a' or something... — Glenn van Acker, Jan 03 '20 at 13:45
Can you set up a working stackblitz example (even with only a dozen example items)? Your question is far to abstract to think about an appropriate answer. Normally, your server api should care about indexing, sorting and caching and push only few data to the Angular client, which in turn has to care about debounceTime, only necessary api http calls and so on. — Jochen Haßfurter, Jan 04 '20 at 14:39

score 21 · Answer 1 · answered Sep 02 '20 at 16:50

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. ;-)

score 5 · Answer 2 · answered May 13 '21 at 10:11

5

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

answered May 13 '21 at 10:11

Tejaswi Kale

51
1
1

Consider editing your answer to include the applicable code section from the link reference. Code sections can be searched. – JohnH May 14 '21 at 05:51
your solution was just perfect for my use case, thanks – Jul6art May 01 '22 at 10:36

score 4 · Accepted Answer · answered Jan 04 '20 at 20:10

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

Thanks for your answer brother. cdk virtual scroll solved my problem. — venkatesh karthick, Jan 05 '20 at 18:39

mat autocomplete is too slow while loading large data

3 Answers3