title: Angular 4 - find selected value in dropdown
body: <p>I am using Angular 4 Reactive Forms to create a dropdown</p>
  
  <pre><code>&lt;select id="city" formControlName="city" (change)="onCitySelect($event)" &gt;
      &lt;option *ngFor="let city of cities" [ngValue]="city" &gt;
          {{ city }} 
      &lt;/option&gt;
  &lt;/select&gt; 
  </code></pre>
  
  <p>When a value is selected in the dropdown, I want to call a method and display the selected value.</p>
  
  <p>Here is my code to do this</p>
  
  <pre><code>onCitySelect(event) {
      console.log(event.target.value);
  }
  </code></pre>
  
  <p>I was expecting it to print the City name as shown in the dropdown. However, it seems it displays the index number as well. For instance,</p>
  
  <pre><code>2: London
  </code></pre>
  
  <p>Instead of just <code>London</code> which is actually shown in the dropdown.</p>
  
  <p>How can I get the city name without the index?</p>