title: Get selected value from select on onChange event with Angular 2
body: <p>I'm developing an Angular 2 application with ASP.NET Core 2.0 and the Visual Studio 2017 Angular's Web application template.</p>
  
  <p>I don't know how to get the selected value from a select when the user changes the selection.</p>
  
  <p>This is the <code>law.component.html</code>:</p>
  
  <pre><code>&lt;p *ngIf="!laws"&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
  Legislaciones:&amp;nbsp;
  &lt;select #l (change)="lawChanges(l.value)"&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option *ngFor="let law of laws" [ngValue]="law"&gt;{{law.name}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is the <code>law.component.ts</code>:</p>
  
  <pre><code>import { Component, Inject, Output, EventEmitter } from '@angular/core';
  import { Http, RequestOptions, Headers } from '@angular/http';
  
  @Component({
      selector: 'law',
      templateUrl: './law.component.html'
  })
  
  export class LawComponent {
      public laws: Law[];
  
      @Output()
      change: EventEmitter&lt;number&gt; = new EventEmitter&lt;number&gt;();
  
      constructor(private http: Http,
          @Inject('BASE_URL') private baseUrl: string) {
  
          http.get(baseUrl + 'api/Law').subscribe(result =&gt; {
              this.laws = result.json() as Law[];
          }, error =&gt; console.error(error));
      }
  
      lawChanges(selectedLaw: Law) {
          console.log("selected law: " + selectedLaw.value + " " + selectedLaw.name + ".");
          this.change.emit(selectedLaw.value);
      }
  }
  
  interface Law {
      value: number;
      name: string;
  }
  </code></pre>
  
  <p>At this what it generates:</p>
  
  <pre><code>&lt;select&gt;
      &lt;option&gt;&lt;/option&gt;&lt;!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}--&gt;
      &lt;option ng-reflect-ng-value="1"&gt;China&lt;/option&gt;
      &lt;option ng-reflect-ng-value="2"&gt;Korea&lt;/option&gt;
      &lt;option ng-reflect-ng-value="3"&gt;European&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is the angular's version (<code>ng --version</code>):</p>
  
  <pre><code>    _                      _                 ____ _     ___
     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                 |___/
  @angular/cli: 1.4.4
  node: 6.11.3
  os: win32 x64
  </code></pre>
  
  <p>This is the JSON returned by the controller:</p>
  
  <pre><code>[
      {
          "value": 1,
          "name": "China"
      },
      {
          "value": 2,
          "name": "Korea"
      },
      {
          "value": 3,
          "name": "European"
      }
  ]
  </code></pre>
  
  <p>At the console I get:</p>
  
  <pre><code>selected law: China .
  </code></pre>
  
  <p>It seems that value is empty.</p>
  
  <p>How can I get the selected value? I think I'm doing something wrong when I define the select but I have found a lot of examples with the same syntax.</p>
  
  <p>By the way, I've found how to do it from this <a href="https://stackoverflow.com/a/35055235/68571">SO answer</a>.</p>