Get selected option text onChange

Question

I know how to get the selected option value when a select changes (as shown below), but how do I get the displayed text of the selected option?

Template:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let option of activeDropdown.options" value="{{option.value}}">
        {{option.text}}
    </option>
</select>

Component:

onChange(value: string) {
    console.log(value);
}

Thanks!

Answer 1

getSelectedOptionText(event: Event) {
   let selectElementText = event.target['options']
      [event.target['options'].selectedIndex].text;
      console.log(selectElementText);                                 
}

HTML

<select name="" ngModel (change)="getSelectedOptionText($event)">
  <option *ngFor="let item of items" [value]="item.id">{{item.name}}
  </option>
</select>

Answer 2

On Angular 6 this worked for me:

let text = event.target.options[event.target.options.selectedIndex].text;

Answer 3

You should pass an object to ngValue and use ngModel:

@Component({
  selector: 'my-app',
  template: `
    <div>
     <select [ngModel]="active" (ngModelChange)="onChange($event)">
       <option *ngFor="let option of activeDropdown.options" [ngValue]="option">
        {{option.text}}
       </option>
     </select>
    </div>
  `,
})
export class App {
  activeDropdown;
  constructor() {
    this.active = {};
    this.activeDropdown = {
      options: [{text: 'One', value: 1}, {text: 'Two', value: 2}]
    }
  }

  onChange(event: string) {
    console.log(event.text);
}
}

Plunker