CODEWITHSUNDEEP
selectangular
mishap
mishap

Reputation: 8505

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

Upvotes: 1

Views: 2835

Answers (2)

mishap
mishap

Reputation: 8505

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

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

Upvotes: 1

Mark Rajcok
Mark Rajcok

Reputation: 364677

What you have should work, i.e.:

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

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

Plunker

Upvotes: 2

Related Questions