_angular-get-value-selected-dropdown-menu-item.md

Code Examples for my Blog Post: How do I get the value of the selected dropdown menu item with Angular?

The full Github repo can be found here: [https://github.com/kevinchisholm/video-code-examples/tree/master/angular/templates-and-data/option-element-get-selected-value](How to get the value of an HTML dropdown with Angular)

Video Demonstration

home.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html',
  styleUrls:  ['src/home/home.css']
})

export class HomeComponent {
  selectedDay: string = '';

  //event handler for the select element's change event
  selectChangeHandler (event: any) {
    //update the ui
    this.selectedDay = event.target.value;
  }
}

home.html

<article>
    <h1>Angular Get Selected Option Value</h1>
    <h2><span>Select a day:</span></h2>
    <select (change)="selectChangeHandler($event)">
        <option value="Monday">Monday</option>
        <option value="Tuesday">Tuesday</option>
        <option value="Wednesday">Wednesday</option>
        <option value="Thursday">Thursday</option>
        <option value="Friday">Friday</option>
    </select>
    <p><span>You selected: </span><b>{{selectedDay}}</b></p>
</article>