javascript - 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:

<select>
  <option *ngFor="let v of values" [value]="v">  
    {{v.name}}
  </option>
</select>

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

Answer 1

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:

<select (change)="onChange($event)">
    <option *ngFor="let v of values" [value]="v.id">{{v.name}}</option>
</select>

TS

export class MyComponent {
  public onChange(event): void {  // event will give you full breif of action
    const newVal = event.target.value;
    console.log(newVal);
  }
}