(click) not working with ion-option and ion-select

Ionic Framework ionic-v3
1

i am involking a function when user clicks on one of the option in dropbox(i.e select - option) , but it seems like click is not working in this case to invoke the function clickOption

.html file

        <ion-select="clickSelect()">
            <ion-option (click)="clickOption()"> morning </ion-option>
        </ion-select>

.ts file

           clickOption(){
                 console.log("hello you clicked clickOption");
            }

please suggest how to invoke the clickOption function… Thanks in advance

2

This should be done this way (check out the ion-option docs for details):

        <ion-select>
            <ion-option (ionSelect)="clickOption()"> morning </ion-option>
        </ion-select>

However it probably won’t work ATM due to the following issue:

As a workaround you could try using the ionChange event of the ion-select component, i.e. using the following HTML (but note that this isn’t exactly the same, and might not satisfy your requirements, as it’s emitted only upon change of the selected option, while ionSelect should be emitted when an option is clicked as it’s specified in your question):

        <ion-select (ionChange)="clickOption()">
            <ion-option> morning </ion-option>
        </ion-select>
2 Likes
3

I’ve found a workaround,
Don’t use a function but a setter instead, to execute the action:

<ion-select>
    <ion-option (ionSelect)="clickOption = optionValue"> morning </ion-option>
</ion-select>

set clickOption(optionValue: string) {
    \\ do what you want
    foo(optionValue);
}

explained here
example here
hope it will help someone :slight_smile:

1 Like
4

this might solve your issue https://stackoverflow.com/a/49802759