0

I need to make an app that lets the user select their country then based on that select their city. I have a list of countries and cities. Once the user selects their country they can select their city and it works but for some contries containing over 1000 city options the select takes a very long time to load and the browser freezes completely.

Are there any solutions? Here is the template

    <select name="country" formControlName="country">
      <option *ngFor="let country of countries" value="{{ country.ISOCode }}">
        {{ country.Name }}
      </option>
    </select>
    <br />
    <label for="city">City of Birth</label>
    <select name="city" formControlName="city">
      <option *ngFor="let city of cities" value="{{ city.Name }}">
        {{ city.Name }}
      </option>
    </select>```
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Dhia Ammar
  • 49
  • 4
  • I would suggest paginating the data, or displaying a spinner until the data is fetched. – Mohamed Karkotly Nov 13 '22 at 19:42
  • Mohamed can you tell me how to display a spinner or how to paginate the data? – Dhia Ammar Nov 13 '22 at 19:44
  • you have to do api calls to retrieve the data when value change, no angular solutions. it is a browser issue – Ali Nov 13 '22 at 19:49
  • Here's how a spinner work, "https://stackblitz.com/edit/angular-mat-select-deferred-loading-spinner-placeholder" the example demonstrates the functionality using Angular Material, you could use the concept and apply it to your template. As per the pagination, since you are fetching the cities from an API, just ask the backend team to paginate it, you will get the result as chunks, and then you could control the functionality for if you want the remaining cities to be fetched onScroll, or with intervals, etc.. – Mohamed Karkotly Nov 13 '22 at 19:52
  • the key word you're looking for is `virtual scroll`, something like this: https://stackoverflow.com/questions/53204313/cdk-virtual-scrolling-issue – Jimmy Nov 13 '22 at 21:32

0 Answers0