Angular - click event on select option element

Question

In my Angular 4 application I am using a select element. On a click on a option in the select element I want to open a dialog. However, I can't find a solution how to query if the option got clicked. I just have one option in the select, so I cannot query if the value changed because the value cannot change.

Is there any possibility to have a click event in the option element?

Answer 1

You can't listen to click events of <option>.

You can use

<select ngModel (ngModelChange)="mySelectHandler($event)">
  <option *ngFor="let value of options" [ngValue]="value">{{value.text}}</option>
</select>

to execute code after an option was selected.

Answer 2

You can add a disabled option so you can use change event, for example like this :

<select #selectList (change)="setValue(selectList.value)">
                      <option value="null" disabled>Select a Value</option>
                      <option  *ngFor="let o of Options" value="{{ o | json }}">{{c.name}}</option>
</select>