Trigger change event on ion-select component in ionic 5

Question

I am trying to trigger a change event everytime I change my option in an ion-select component. The problem is that the change event is triggered when I press the OK button in the popover of the ion-select button. I want to trigger the change event EVERYTIME I select an option.

My initial goal is to select an option and close immediately the popover.

P.S. Please do not propose interface property because I want to keep the design of ion-alert.

Any ideas?

My code:

In my html file:

<ion-item>
  <ion-select value="-1" (ionChange)="triggerEvent()">
    <ion-select-option value="-1">All</ion-select-option>
    <ion-select-option value="a">A</ion-select-option>
    <ion-select-option value="b">B</ion-select-option>
    <ion-select-option value="c">C</ion-select-option>
  </ion-select>
</ion-item>

In my ts file:

triggerEvent() {
    console.log('event trigger');
}

Answer 1

There are two ways to achieve that:

Solution 1

The one way that I would suggest to do that so easily is to use an interface="popover" like this and the output like this:

<ion-item>
  <ion-select value="-1" interface="popover" (ionChange)="triggerEvent()">
   <ion-select-option value="nes">NES</ion-select-option>
    <ion-select-option value="n64">Nintendo64</ion-select-option>
    <ion-select-option value="ps">PlayStation</ion-select-option>
    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
    <ion-select-option value="snes">SNES</ion-select-option>
  </ion-select>
</ion-item>

and the result will look like this:

Soultion 2

If you want to stick with the same design you can try to add an event listener when user click on the ion-select-option and close the ion-select manually it will take some time to implement correctly but it's possible to do that also.