How to handle (ion select) OK Button?

4
votes

I have an ionic select directive and wanna handle the 'OK' button, that when I click the button it should go and call some function.

I know that we have the (ionChange) but this one is only done when I change a selected element.

Thanks in advance.

2
angulartypescriptionic-frameworkionic3
What does the select have to do with the button? Can you program a button and call a function? - nvoigt
@nvoigt I didn't get your comment. - Zeyad Ali
What is the problem you are having? What can you do and what are you having problems with? Can you put a button on a page and call a method on click without a select element? How is your problem with the button connected to the mentioned select element? - nvoigt
(ionChange)=“onChange($event)” should do the trick. It should fire when the ok button is pressed. Do you use ion-options inside of ion-select only? - Sam
(ionChange) handles when I change between the selected Items..If I don't change the selected Item it will not call the function I want to call @Sam - Zeyad Ali

2 Answers

0
votes

You can simply do something like:

html:

<ion-select id="something" name="something" [(ngModel)]="something"  (ionChange)="something($event)" data-live-search="true">
        <ion-option *ngFor="let s of something" [value]="s.id">{{s.name}}</ion-option>
    </ion-select>
    <ion-button (click)= "clicked()" >Hit Me!</ion-button>

ts: 

clicked(){
  //call your function 
  //use this.lastSelected for your function.
}


something($event) = {
   this.lastselected = $event.target.value;
}
0
votes

Ionic 5+/Angular 12+

This works for me:

 <ion-select formControlName="status" (ionCancel)="cancel()" (ionChange)="ok($event)">
    <ion-select-option value="sold">Sold</ion-select-option>
    <ion-select-option value="lost">Lost</ion-select-option>
 </ion-select>