How to handle canel and ok clicks in ion-select?

#1
In my app I'm using the Select component, My select component looks like this:
<ion-list>
  <ion-item>
  <ion-label>Category</ion-label>
  <ion-select [(ngModel)]="category" cancelText="cancel" okText="Confirm!">
    <ion-option value="Def1" checked="true">Def1</ion-option>
    <ion-option value="Def2">Black Def2</ion-option>
    <ion-option value="Def3" >Def3</ion-option>
    <ion-option value="Def4">Def4</ion-option>
       </ion-select>
</ion-item>
</ion-list>

Now I want to handle the click events say, If the user clicks on confirm or cancel It should show an alert or go to another page How can I handle the click events? Please help.
2 Likes
#2

You can use the cancel and change events of <ion-select>:

<ion-select (cancel)="onCancel()" (change)="onChange()">
      <ion-option value="1">One</ion-option>
      <ion-option value="2">Two</ion-option>
      <ion-option value="3">Three</ion-option>
</ion-select>
8 Likes
#3

Thanks Its working perfectly now!!

#4

I was just wondering how to get the selected value?

#5

the ngmodel is bound to your backing code. So you can use this.category to get the value from the select in the eventhandler.

1 Like
#6

Thanks Worked perfectly

1 Like
#7

sorry, not work for me, it’s not trigger after change

update:
use ionChange instead of change

13 Likes
#8

Thanks for update ionChange work for me!!!

#9

Yes, that’s right, the component events in Ionic 2 have been renamed in 2.0.0-beta.8.

1 Like
#10

@iignatov

<ion-select #thisCourseTypeElement [(ngModel)]="courseValue" (cancel)="onCancel()" (change)="onChange()" >
      <ion-option *ngFor="let item of courseOpction">{{item.course}}</ion-option>
  </ion-select>

(change) and (cancel) not working for me, can you please help me.

How to get the selected value and index of selected value.?
can you explain…

Thanks…

#11

All of this is described in the docs.

#12

@rapropos

Thanks for Your Response…

<select #thisGenderElement [ngModel]=“courseSelectedValue” (change)=“onCourseChange($event.target.value, thisGenderElement.selectedIndex)”>
<option *ngFor=“let item of courseOpction”>{{item.course}}

in above code am calling method “onCourseChange()” on changing selection and passing selected value and index, this what i want achieve in ionic 2.
can we it in same way, Please Let me know…

Thanks…

#13

I did not understand what the documentation meant here:

The select component takes child ion-option components. If ion-option is not given a value attribute then it will use its text as the value.

and I had tried what @iignatov sugest but did not work, below some code:

        <ion-item>
            <ion-label>Name(s)</ion-label>
            <ion-select [(ngModel)]="local" (cancel)="onCancel()" (change)="abrirLocal()">
                <ion-option *ngFor="let item of items" [value]="item">{{ item.descricaoLocal }}</ion-option>
            </ion-select>
        </ion-item>
  abrirLocal(local) {
    console.log(local.target.value)
  }

I want to get the item that the user choose, but with that I can.

#14

It is unusual for you to need both a change handler and an [(ngModel)] binding. The local property in your controller should always reflect the selected value if you have [(ngModel)]="local". If for whatever reason you still feel the need for a change handler, it should accept the ionChange event, and if you are expecting it to get an argument, you need to pass it one: (ionChange)="abrirLocal($event)".

1 Like
#15

Thanks mahn! Was looking for exactly this!

#16

Thanks. This is the solution.

#17

How to handle canel button or unselect the selected option in ion-select?

#18

How to handle canel button ? i want to unselect the already selected option when click on cancel or any other way to unselect option ?

1 Like
#19

What if I want to detect when the user clicks on the ion-option? Is there an event for clicked ion-option?

#20

(ionCancel)=“onCancel($event)” (ionChange)=“abrirLocal($event)”

Use the above approach

2 Likes