title: How to bind dropdown asynchronously in angular2 using observables?
body: <p>I am new to angular2 and i wonder how to bind drop down asynchronously using angular2?
  I have a service like this</p>
  
  <pre><code> this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
              .subscribe(value =&gt; {
                  var results = JSON.parse(value['_body']);
                  for (let d of results) {
                      this.countries.push(new Country(d['Country'], d['CountryCode']))
                  }
              }, error =&gt; error, () =&gt; {
                  console.log('complete');
                  return this.countries;
  
              });
  </code></pre>
  
  <p>and i am calling the service from the component like this</p>
  
  <pre><code>this.countries = this.countryServices.getCountry();
  </code></pre>
  
  <p>Now when i am trying to bind the data in the dropdown, i am not able to bind it</p>
  
  <pre><code>    &lt;select class="form-control input-sm" formControlName="country"&gt;                                               
      &lt;option class="small" *ngFor="let c of countries" value="{{c.countryCode}}"&gt;{{c.countryName}}&lt;/option&gt; 
  &lt;/select&gt;
  </code></pre>
  
  <p>I also tried to use the keyup event of angular2 like this (keyup)="0" but it never worked.</p>