How can I to execute a function automatically when I select an ion-select-option?

Question

I need to execute a function automatically when I select an ion-select-option but I haven´t found the solution.

My code is this:

    <ion-select placeholder="Options" 
                (ionChange)="changeOption($event)">
      <ion-select-option id="option-1" value="option-1">
        Option 1
      </ion-select-option>
      <ion-select-option id="option-2" value="option-2">
        Option 2
      </ion-select-option>
    </ion-select>

And I have tried with these options But none of these options work for me :(

<ion-select-option id="option-2" value="option-2" (ionSelect)="test($event)">Option 2</ion-select-option>
<ion-select-option id="option-2" value="option-2" (focus)="test($event)">Option 2</ion-select-option>
<ion-select-option id="option-2" value="option-2" (ionChange)="test($event)">Option 2</ion-select-option>

PD: Sorry for my English, my level is very poor yet. I hope your help

Answer 1

You'll need to change the interface option as said in the docs https://ionicframework.com/docs/api/select#interface-options : "The action-sheet and popover interfaces do not have an OK button, clicking on any of the options will automatically close the overlay and select that value. The popover interface does not have a Cancel button, clicking on the backdrop will close the overlay."

But it'll work only with a single-select option. You can't use multiple selection with popover or action-sheet.

And with that you can use (ionchange) or get the value in a form:

<ion-select placeholder="Options" interface ="action-sheet" (ionChange)="changeOption($event)">
<ion-select-option id="option-1" value="option-1">
Option 1
</ion-select-option>
<ion-select-option id="option-2" value="option-2">
Option 2
</ion-select-option>
</ion-select>