CODEWITHSUNDEEP
angularcombobox
rcarcia02
rcarcia02

Reputation: 977

Angular 4 - How do I take in the value of what is selected from my combobox?

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!

Here's my emp-info.ts:

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;
}

Here's my emp-info.service.ts:

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<EmpInfo[]> {
        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<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

Here's my tracker.component.ts:

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 => this.empInfo = empInfo
        );
    }

    ngOnInit(): void {
        this.getEmpInfo();
    }

    toggleSummary(): void {
        this.isHidden = !this.isHidden;
    }
}

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 

<div class="row">
  <div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}" style="background-color:red;">
    <button class="form-control" style="width:150px;" (click)="toggleSummary()">Open Summary</button>
    <select id="empName">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo" [value]="emp.EmpKey">{{emp.EmpID}}</option>
    </select>
    <select id="PTOtype">
      <option selected="selected" disabled>Type of PTO...</option>
      <option value="PTO">PTO</option>
      <option value="ETO-Earned">ETO - Earned</option>
      <option value="ETO-Used">ETO - Used</option>
      <option value="STDLTD">STD/LTD</option>
      <option value="Uncharged">Uncharged</option>
    </select>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Full/Half</th>
          <th>Hours</th>
          <th>Scheduled?</th>
          <th>Notes</th>
          <th>In P/R?</th>
        </tr>
        <tr>
        </tr>
      </thead>
    </table>
  </div>
  <div *ngIf="isHidden" class="col-xs-5">
        <pto-summary></pto-summary>
  </div>
</div>

Thanks!

Upvotes: 1

Views: 5349

Answers (1)

SrAxi
SrAxi

Reputation: 20015

You need to use the model for that:

<select id="empName" [(ngModel)]="selectedEmployee" (ngModelChange)="employeeSelected($event)">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo" [value]="emp.EmpKey">{{emp.EmpID}}</option>
</select>

In your Component you declare it:

public selectedEmployee; // You can specify the type: string, Class, number, etc. Example: `public selectedEmployee: string;`.

You can handle the selection event if you so desire:

// Here we handle the model's change event. 
  employeeSelected(event) {
    console.log('selected employee: ' + event);
  }

Some documentation of: NgModel.

Upvotes: 3

Related Questions