-1

I have an Angular 9 application, where I am using select to populate the cities belong to a country. Countries are also listed using a normal html select, not using any third party components like material. Currently I am facing some slowness with rendering the select for cities when I have around 5700 cities against a country. We are populating cities from an API endpoint, when the country value changes. The issue is not present when there are fewer cities against a country.

When I looked for a solution across the forums, many are suggesting to use a autocomplete search box for cities.In our case, we should have to stick with the select as the customer wants it that way.

Would like to hear your thoughts/solution/approaches for this

Thanks

RageshAK
  • 103
  • 1
  • 4
  • 12
  • Yes you should use autocomplete ones for huge dataset for performance. But if you have to use select then you should put search input and custom pipe or use multi dropdown select library – mr. pc_coder Jun 22 '20 at 07:26
  • If customer wants it that way, put a loader (spinner etc) till the API response comes back. – Manish Jun 22 '20 at 07:33
  • Manish, API response is fast, but the rendering is taking the time. – RageshAK Jun 22 '20 at 07:47

1 Answers1

0

Virtual scroll can resolve your issue. Because in case of big lists, like yours. CDK Virtual scroll should be used. Please refer to Cdk virtual-scroll inside mat-select for mat-option for how to implement it.

Aakash Garg
  • 10,649
  • 2
  • 7
  • 25
  • Thanks Aakash for your reply. As I mentioned in the post, I'm not using material select, instead using native select control. I wonder whether this works for native element. – RageshAK Jun 22 '20 at 08:56
  • @RageshAK for native select there are no such options availbale, what you can do it show 10 times and show last option as show more and on click of that add more items to list. – Aakash Garg Jun 22 '20 at 09:00
  • @RageshAK or for other options you can try on push strategy in component. – Aakash Garg Jun 22 '20 at 09:00
  • my requirement is like I need to restore the selected city when navigating back from the next screen. Therefore the option of splitting the data into chunks and showing it in sets is not feasible. Thanks once again for your answer. – RageshAK Jun 23 '20 at 04:05
  • it can be feasible if you always show selection option on top – Aakash Garg Jun 23 '20 at 04:06