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?
I was in the same situation and my solution was to limit the list to the 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);It will filter all articles, but show only the first 10 that match. ;-)
If the data is huge in autocomplete then performance is poor, I have solved the same problem using *cdkVirtualFor overrides *ngFor inside autocomplete.
find the references below.
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