title: Angular 4 - How do I take in the value of what is selected from my combobox?
body: <p>I'm new to Angular and am having trouble trying to get the value of the option that's chosen from the Combo box. What I want to do is to get the value of what is selected into a variable named selectedEmployee and then use that value to print out different values into a table. Any help is appreciated! Thanks in advance!</p>
  
  <p>Here's my emp-info.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class EmpInfo {
      EmpKey: number;
      EmpID: string;
      Firstname: string;
      LastName: string;
      EmpStat: string;
      StartDate: Date;
      AdjustedStart: Date;
      Anniversary: number;
      PTOYear: number;
      STDLTD: number;
      Uncharged: number;
      ETOEarned: number;
      ETORequests: number;
      ETORemaining: number;
      PTOBase: number;
      PTOCarry: number;
      PTOBorrowed: number;
      PTOBalance: number;
      PTORequests: number;
      PTORemaining: number;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my emp-info.service.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  import 'rxjs/add/operator/toPromise';
  
  
  import { EmpInfo } from './emp-info';
  
  @Injectable()
  
  export class EmpInfoService {
      private empInfoUrl = 'api/EmpInfo';
  
      constructor(private http: Http) { }
  
      getEmpInfos(): Promise&lt;EmpInfo[]&gt; {
          return this.http.get(this.empInfoUrl)
              .toPromise()
              .then(this.extractData)
              .catch(this.handleError);
      }
  
      private extractData(res: Response) {
          let body = res.json();
          return body || {};
      }
  
  
      private handleError(error: any): Promise&lt;any&gt; {
          console.error('An error occurred', error);
          return Promise.reject(error.message || error);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my tracker.component.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { SummaryComponent } from './summary.component';
  import { EmpInfoService } from './emp-info.service';
  import { EmpInfo } from './emp-info'; 
  
  @Component({
      selector: 'pto-tracker',
      templateUrl: `./tracker.component.html`,
      styleUrls: ['./tracker.component.css']
  })
  
  export class TrackerComponent implements OnInit{
      empInfo: EmpInfo[];
      isHidden: boolean = false;
  
      constructor(private empInfoService: EmpInfoService) { }
  
      getEmpInfo(): void {
          this.empInfoService.getEmpInfos().then(
              empInfo =&gt; this.empInfo = empInfo
          );
      }
  
      ngOnInit(): void {
          this.getEmpInfo();
      }
  
      toggleSummary(): void {
          this.isHidden = !this.isHidden;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here's my tracker.component.html where I want to take the value that is selected from the empName combobox and set it to the variable selectedEmployee </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}" style="background-color:red;"&gt;
      &lt;button class="form-control" style="width:150px;" (click)="toggleSummary()"&gt;Open Summary&lt;/button&gt;
      &lt;select id="empName"&gt;
        &lt;option selected="selected" disabled&gt;Employee Name...&lt;/option&gt;
        &lt;option *ngFor="let emp of empInfo" [value]="emp.EmpKey"&gt;{{emp.EmpID}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="PTOtype"&gt;
        &lt;option selected="selected" disabled&gt;Type of PTO...&lt;/option&gt;
        &lt;option value="PTO"&gt;PTO&lt;/option&gt;
        &lt;option value="ETO-Earned"&gt;ETO - Earned&lt;/option&gt;
        &lt;option value="ETO-Used"&gt;ETO - Used&lt;/option&gt;
        &lt;option value="STDLTD"&gt;STD/LTD&lt;/option&gt;
        &lt;option value="Uncharged"&gt;Uncharged&lt;/option&gt;
      &lt;/select&gt;
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Full/Half&lt;/th&gt;
            &lt;th&gt;Hours&lt;/th&gt;
            &lt;th&gt;Scheduled?&lt;/th&gt;
            &lt;th&gt;Notes&lt;/th&gt;
            &lt;th&gt;In P/R?&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div *ngIf="isHidden" class="col-xs-5"&gt;
          &lt;pto-summary&gt;&lt;/pto-summary&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!</p>