Trigger change event on ion-select component in ionic 5

Ionic Framework Ionic Angular
1

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');
}
2

It sounds to me like you’ve painted yourself into a corner.

I’m going to do what you asked people not to, because I think it’s far easier to emulate L&F with styling than it is to make framework components behave fundamentally differently than they are designed to.

If you want a selection to immediately close the dialog, without the extra step of an OK button, then alert is a bad choice for the interface. I would use either action-sheet or popover, depending on whether you want an explicit cancel button or to use the backdrop. Then just define your own CSS to match whatever it is that you like about the alert interface.

HOWEVER, the presence of that “all” option gives me a moment of pause. If what the “all” option is supposed to do is actually mean “A, B, and C”, then you may actually want to look at enabling multiple selection. At that point you have to use the alert interface, and you actually don’t want to do what you say you do in terms of closing the overlay on any selection, because it would be perfectly reasonable for a user to initially check “all” and then uncheck one or two options, which couldn’t be done if the dialog closes immediately. Of course, if there really are only three options, this isn’t a huge concern, but if there are many more in the real app, then it definitely would become one.

3

Hello,
In fact this was doable with Ionic 3 where you could have some change event on ion-option instead of ion-select. I find the new interface cleaner. What could be great would be to extend the API and just add an event “click” on ion-select-option that would allow closing directly the component at that time. I have the same issue and I do not really like the style of the popover that I found a bit messy for a mobile app.
Thanks