Angular 4 Get the Text of Selected option of Select control

Question

I am trying to get the Text of Selected option of Select control in Angular 4.

HTML:

<div class="col-sm-6 form-group">
<label>Industry</label>
<select   class="form-control select"  formControlName="Industry">
<option value="">Please select Value</option>  
<option *ngFor="let industry of industries"  
[ngValue]="industry.ID">{{industry.Name}}  
</option>  
</select> 
</div>


upload.component.ts
this.form.controls['Industry'].valueChanges.subscribe((name) => {
                this.form.controls['IndustryName'].setValue(name);
  });

I am using formControlName property from Reactive.

Kindly suggest the idea to retrive the Text of Selected Select control

Answer 1

You can use

<select class="form-control" (change)="onChange($event)">

</select>

then in the component

onChange($event){
let text = $event.target.options[$event.target.options.selectedIndex].text;
}

Answer 2

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

HTML

<select class="form-control select" formControlName="Industry" (change)="getSelectedOptionText($event)">
  <option value="">Please select Value</option>  
  <option *ngFor="let industry of industries" value="{{industry.ID}}">{{industry.Name}}</option>
</select>