Angular 2 get value of <option> on change

I have an array for my select:

private ranges = [
  { text: "Last 30 days", value: 30 },
  { text: "Last 60 days", value: 60 },
  { text: "Last 90 days", value: 90 },
  { text: "Last 365 days", value: 365 },
  { text: "All", value: '' }
];

and select:

<select id="ActivityRange" #sel (change)='select(sel.value)'>
  <option *ngFor="#range of ranges" [value]="range.value">
   {{range.text}}
  </option>
</select>

and trying to get the value of select on change (“30” for “Last 30 days”), but i’m getting text value (“Last 30 days” instead of “30”)

 select(selectedValue) {
   console.log(selectedValue);
 }

Here is the plunk

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

What you have should work, i.e.:

<option *ngFor="#range of ranges" [value]="range.value">
select(selectedValue) {
   console.log(selectedValue);
}

Plunker

Jason
Guest

I had to use [attr.value] to make it work with latest Angular 2 version:

 <option *ngFor="#range of ranges" [attr.value]="range.value">