title: Load large data in select tag in Angular 4
body: <p>I have a select tag with thousands of options (names of cities), which the user can choose between as birth city, and is given by a service.
  service file </p>
  
  <pre><code>getAllCities () {
  return this.httpClient.get&lt;City[]&gt;(this.API_URL + 'cities');
  }
  </code></pre>
  
  <p>In html component file:</p>
  
  <pre><code>&lt;select
         class="form-control"
         id="city"
         name="city"
         ngModel
  &gt;
       &lt;option disabled selected value=""&gt; Select city&lt;/option&gt;
       &lt;option *ngFor="let elt of cities" [ngValue]="elt.code_city"&gt;
                  {{ elt.city_name }}
       &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In component.ts file</p>
  
  <pre><code>getCities(){
  this.shareService.getAllCities()
    .subscribe(
      (response: Array&lt;City&gt;) =&gt; {
        console.log(response);
        this.cities = response;
      },
      (error) =&gt; console.log('Error getting cities: ' + error)
    );
  }
  </code></pre>
  
  <p>The problem is that my application block? and does not load the cities, have you any idea how I can do that in angular 4 (which method I must take to prevent this behavior) 
  thanks</p>