Get current value when change select option - Angular2

Question

I'm writing an angular2 component and am facing this problem.

Description: I want to push an option value in select selector to its handler when the (change) event is triggered.

Such as the below template:

<select (change)="onItemChange(<!--something to push-->)">
    <option *ngFor="#value of values" value="{{value.key}}">{{value.value}}</option>
</select>

Component Class:

export Class Demo{

  private values = [
     {
        key:"key1",
        value:"value1"
     },
     {
        key:"key2",
        value:"value2"
     }
  ]

  constructor(){}
  onItemChange(anyThing:any){
     console.log(anyThing); //Here I want the changed value
  }
}

How can I get the value(without using jquery) ?

score 86 · Accepted Answer · edited Feb 02 '21 at 15:25

86

There is a way to get the value from different options. check this plunker

component.html

<select class="form-control" #t (change)="callType(t.value)">
  <option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>

component.ts

this.types = [ 'type1', 'type2', 'type3' ];

callType(value) {
  console.log(value);
  this.order.type = value;
}

edited Feb 02 '21 at 15:25

Dan Atkinson

11,391
14
81
114

answered Jan 28 '16 at 07:28

Mubashir

4,134
4
22
30

4

what is the use of this code here this.order = { type: 'type1' }; – sree Jun 22 '18 at 09:28

score 38 · Answer 2 · edited Feb 02 '21 at 15:24

In angular 4, this worked for me

template.html

<select (change)="filterChanged($event.target.value)">
  <option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
  </option>
</select>

component.ts

export class FilterComponent implements OnInit {

selectedFilter:string;
   public filterTypes = [
     { value: 'percentage', display: 'percentage' },
     { value: 'amount', display: 'amount' }
  ];

   constructor() { 
     this.selectedFilter = 'percentage';
   }

   filterChanged(selectedValue:string){
     console.log('value is ', selectedValue);
   }

  ngOnInit() {
  }
}

but how to get "type.display" in filterChanged() – Faisal Apr 20 '18 at 09:09 — Faisal, Apr 20 '18 at 09:09

score 5 · Answer 3 · answered Jan 28 '16 at 07:43

5

Checkout this working Plunker

<select (change)="onItemChange($event.target.value)">
    <option *ngFor="#value of values" [value]="value.key">{{value.value}}</option>
</select>

answered Jan 28 '16 at 07:43

micronyks

54,797
15
112
146

1

Thanks for responding, actually @Mubashir's answer is what I want without reading DOM. – Garry Jan 28 '16 at 08:06
No problem. Cheers ! – micronyks Jan 28 '16 at 08:41

score 2 · Answer 4 · answered Jul 13 '17 at 18:35

For me, passing ($event.target.value) as suggested by @microniks did not work. What worked was ($event.value) instead. I am using Angular 4.2.x and Angular Material 2

<select (change)="onItemChange($event.value)">
    <option *ngFor="#value of values" [value]="value.key">
       {{value.value}}
    </option>
</select>

score 1 · Answer 5 · answered Jul 21 '21 at 07:54

HTML

<h3>Choose Your Favorite Cricket Player</h3>
<select #cricket (change)="update($event)">
    <option value="default">----</option>
    <option *ngFor="let player of players" [value]="player">
        {{player}}
    </option>
</select>
  
<p>You selected {{selected}}</p>

Javascript

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  players = [
    "Sachin Tendulkar",
    "Ricky Ponting",
    "Virat Kohli",
    "Kumar Sangakkara",
    "Jacques Kallis",
    "Hashim Amla    ",
    "Mahela Jayawardene    ",
    "Brian Lara",
    "Rahul Dravid",
    "AB de Villiers"
  ]
  selected = "----"
  
  update(e){
    this.selected = e.target.value
  }
}

app.componen.html

<app-dropdown></app-dropdown>

score 0 · Answer 6 · edited Jun 13 '18 at 10:40

0

You can Use ngValue. ngValue passes sting and object both.

Pass as Object:

<select (change)="onItemChange($event.value)">
    <option *ngFor="#obj of arr" [ngValue]="obj.value">
       {{obj.value}}
    </option>
</select>

Pass as String:

<select (change)="onItemChange($event.value)">
    <option *ngFor="#obj of arr" [ngValue]="obj">
       {{obj.value}}
    </option>
</select>

edited Jun 13 '18 at 10:40

ata

3,398
5
20
31

answered Jun 13 '18 at 09:52

Ashfaq Hussain

73
1
4

score 0 · Answer 7 · answered Oct 28 '19 at 17:14

Template:

<select class="randomClass" id="randomId" (change) = 
"filterSelected($event.target.value)">

<option *ngFor = 'let type of filterTypes' [value]='type.value'>{{type.display}} 
</option>

</select>

Component:

public filterTypes = [{
  value : 'New', display : 'Open'
},
{
  value : 'Closed', display : 'Closed'
}]


filterSelected(selectedValue:string){
  console.log('selected value= '+selectedValue)

}

Get current value when change select option - Angular2

7 Answers7

Linked