1

I'm working on a project in which I would like to populate a selectbox with all the cities of a certain country. The array I get from my db is about 2800 records long. When Angular renders this selectbox it takes pretty long although the data is ready for rendering very fast.

Here is my html code:

<div class="form-group">
    <label for="city">City</label>
    <select type="text" id="city" class="form-control" ngModel name="city" required [ngModel]="user?.city.zipcode">
           <option *ngFor="let city of cities" value="{{city.zipcode}}">{{city.cityName}}</option>
    </select>
</div>

I tried to get it to speed up using virtual scrolling but I'm not finding very good examples in how to use this with selectboxes and this also doesn't fix the rendering lag caused by the 2-way binding. Does anyone have a solution for this which I can follow. I'm still a junior in Angular so any help is more than welcome.

Thanks for you're time and effort in advance!

Maarten De Weerdt
  • 33
  • 1
  • 6
  • try using trackby if you have unique id for each element – vito Jan 06 '18 at 19:26
  • Sorry my surprise (and my "no answer"), but, a select with about 2800 records? Try to implement some solution like to typeahead or some more "reasonable" .https: //ng-bootstrap.github.io/#/components/typeahead/examples – Eliseo Jan 06 '18 at 23:10
  • I never actually thought about typeahead. Thanks for the tip, that will probably speed up the process as well. still think it's odd though that it slows down that much with *NgFor and 2-way binding. Anyways thanks for you're reply! – Maarten De Weerdt Jan 07 '18 at 07:08

0 Answers0