Angular 2 select option dropdown - how to get the value on change so it can be used in a function

Question

I am trying to build a drop down with a few values   However  on selecting a value  I want to make an API call that takes an id   In my component ts  I have an array of values   values         id  3432  name   Recent         id  3442  name   Most Popular         id  3352  name   Rating         In my template  I am using that array as follows    lt select gt     lt option  ngFor  let v of values   value   v  gt          v name      lt  option gt   lt  select gt    However  on picking a value from the drop down  how can I access the id property   I want to use that in my function getPhotosByType id    Thanks

User · Answer

You need to use an Angular form directive on the select. You can do that with ngModel. For example

@Component({
  selector: 'my-app',
  template: `
    <h2>Select demo</h2>
    <select [(ngModel)]="selectedCity" (ngModelChange)="onChange($event)" >
      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
    </select>
  `
})
class App {
  cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
  selectedCity = this.cities[1];

  onChange(city) {
    alert(city.name);
  }
}

The (ngModelChange) event listener emits events when the selected value changes. This is where you can hookup your callback.

Note you will need to make sure you have imported the FormsModule into the application.

Here is a Plunker

User · Answer

Template HTML File  component ts       lt select gt    lt option  ngFor  let v of values   value   v   ngModelChange   onChange  event   gt          v name      lt  option gt   lt  select gt    Typescript File  component ts   values         id  3432  name   Recent         id  3442  name   Most Popular         id  3352  name   Rating        onChange cityEvent       console log cityEvent      It will display the select city data      ngModelChange  is the  Output of the ngModel directive  It fires when the model changes  You cannot use this event without the ngModel directive

User · Answer

lt select   ngModel    selectedcarrera   change   mostrardatos    class  form-control  name  carreras  gt       lt option  ngFor  let x of carreras   ngValue   x  gt    x nombre    lt  option gt   lt  select gt    In ts  mostrardatos

User · Answer

My answer is little late but simple  but may help someone in future  I did experiment with angular versions such as 4 4 3  5 1   6 x  7 x  8 x  9 x and 10 x using  event  latest at the moment  Template   lt select  change   quot onChange  event  quot  gt       lt option  ngFor  quot let v of values quot   value   quot v id quot  gt   v name   lt  option gt   lt  select gt   TS export class MyComponent     public onChange event   void       event will give you full breif of action     const newVal   event target value      console log newVal

User · Answer

values of objArray         id  3432  name   Recent         id  3442  name   Most Popular         id  3352  name   Rating        private ValueId   number   0    this will be used for multi access like                                  update  deleting the obj with id  private selectedObj   any   private selectedValueObj id  any      this ValueId    id srcElement    id target  value    for  let i   0  i  lt  this values of objArray length  i          if  this values of objArray i  id    this ValueId          this selectedObj   this values of objArray i                 Now play with this selectedObj which has the selected obj from the view   HTML    lt select name  values of obj  class  form-control    ngModel    ValueId             change   selectedValueObj  event   required gt      lt option  ngFor  let Value of values of objArray             value   Value id  gt   Value name   lt  option gt       lt  select gt

User · Answer

Another solution would be you can get the object itself as value if you are not mentioning it s id as value   Note   value  and  ngValue  both works here    lt select  change   your method values  event target selectedIndex    gt     lt option  ngFor  let v of values   value   v   gt          v name      lt  option gt   lt  select gt    In ts   your method v any       access values here as needed        v id or v name     Note  If you are using reactive form and you want to catch selected value on form Submit    you should use  ngValue  directive instead of  value  in above scanerio   Example      lt select  change   your method values  event target selectedIndex    formControlName  form control name  gt         lt option  ngFor  let v of values   ngValue   v   gt              v name          lt  option gt       lt  select gt    In ts   form submit method            let v   any   this form group name value form control name

[javascript] Angular 2 select option (dropdown) - how to get the value on change so it can be used in a function?

Examples related to javascript

Examples related to html

Examples related to angular

Examples related to typescript