Ionic 2 select: remove selected option

ion-select-option selected not working
ion-select default value
ion-select get selected value
ion-select-option is not a known element
ion-select onchange
ion-select color
ionic multi select checkbox
ion-select change event ionic 3

I'm using ion-select component in a form, but got a problem: if users selects one option, but then wanna remove it, it doesn't give the option. I could add a <ion-option> with blank value, but think it wouldn't be nice. Is there a better way to solve that?

EDIT: This is how my select options looks right now:

If the users selects one option and then changes his mind and don't wanna select any option, it doesn't seems pretty clear the way he can do that. Even if add a "Remove Option" with blank value, it still looks like an option, doesn't seems nice to me. With a traditional select, the blank option without a text seems pretty intuitive. But in this case, I was thinking in something like a " (X) Remove selected", near to "Cancelar/Confirmar" options in the footer, or something like that. Any ideas? Ps: also, ion-option seems to strip any html tag I put on my option, so it keeps pretty tough to format my "select none" option


@sonu's solution will work if the user wants to click on the ion-select again and chose a select-nothing option, but I don't find that a pleasant experience.

An alternative way to get to what you want is to use a small clear button next to your ion-select, which appears only when user has already selected something:

  <ion-label>Options</ion-label>
  <ion-select [(ngModel)]="option">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

  <div *ngIf="option=='m' || option=='f'">
    <ion-label> {{option}} </ion-label>
    <ion-button  (click)='removeSelection()'>
       <ion-icon name='close'></ion-icon>
    </ion-button>
  </div>

Where removeSelection() is a function that changes the selection to "No selection", perhaps by setting this.option=null.

Of course, you can style this button as you wish. You may also want to look at ionic chips. In particular, delete chips are one way to implement your intention.

ionic2 - Ionic 2 select: remove selected option, @sonu's solution will work if the user wants to click on the ion-select again and chose a select-nothing option, but I don't find that a pleasant experience. Changing the API used in the select element (by using the ActionSheet API) could be an option. In order to do that, you only need to add interface="action-sheet" in the ion-select element. <ion-item> <ion-label>Gender</ion-label> <ion-select interface="action-sheet"> <ion-option value="f" selected="true">Female</ion-option> <ion-option value="m">Male</ion-option> </ion-select> </ion-item>


To trigger a function that handles the cancel selection you can just use the ionCancel attribute like this

  <ion-select okText="Select" cancelText="Clear"formControlName="selectionValue" (ionCancel)="clearSelection()">
          <ion-option *ngFor="let selection of selections" [value]="selection.value">{{selection.description}}</ion-option>
  </ion-select>

And in the code just implement the function you declared; in this case clearSelection()

clearSelection() {
    this.myModel.selectedValue = null;
}

Now every time you press the clear button your function will be triggered

Documentation: ion-select

ion-select, The select component's value receives an array of all of the selected option values. Note: the action-sheet and popover interfaces will not work with multiple  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. If ngModel is bound to ion-select, the selected value will be based on the bound value of the model. Otherwise, the selected attribute can be used on ion-option components. Interfaces


It's better way to have option with blank value.You can use code as per ionic docs

example:

<ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="">Select Gender</ion-option>
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

Or you can add any event for selection clear.

Select - Ionic API Documentation, If ion-option is not given a value attribute then it will use its text as the value. If ngModel is bound to ion-select , the selected value will be based on the bound value  @ranakrunal9 i think click functions should be used on ion-select tag only if i use in ion-options tag i am not able to invoke the function itself – Mohan Gopi Sep 15 '16 at 5:58 So for using it to ion-select you have to assign [value]=item in ion-option and need to use gaming in your optionsFn function. so remove argument from optionsFn and try to check. – ranakrunal9 Sep 15 '16 at 6:04


I had a slight different requirement - after selecting an option and clicking on OK button, the selected value should be used in function called by ionChange and then selected option in ion-select should get deselected. I tried various solutions mentioned in various sites but none worked. Even the working solution in plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview where the ngModel value is set to null didn't work for me. So I tried myself different things and one them did the trick. Below is the way that worked for me:-

In HTML I have used #languageSelect as template reference variable for ViewChild in ion-select

<ion-label>Select Language</ion-label>
<ion-select #languageSelect (ionChange)="langSelected($event)">
  <ion-option *ngFor="let lang of languages" [value]="lang">{{lang}}</ion-option>
</ion-select>

And in ts file it is used as

@ViewChild('languageSelect') languageSelect: Select;

In langSelected() it is cleared after doing the needful.

langSelected(value) {
 //used the value as required
 ...
 ...
 this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}

Ionic 2 select: remove selected option - ionic2, I'm using ion-select component in a form, but got a problem: if users selects one option, but then wanna remove it, it doesn't give the option. I could add a  Demo source Option ion-option. Improve this doc ion-option is a child component of ion-select.Similar to the native option element, ion-option can take a value and a selected property.


Create a Custom Input for Ion-Select - Better Programming, <ion-select-option selected>Custom</ion-select-option> that we will not be able to provide a “delete” custom option functionality in this scope. Step 2: We add ion-select, add replication via *ngFor and add all necessary  Ionic 2 Select ion-select component is used to create the select element similar to the HTML <select> element. Ionic 2 provides various types of select boxes which can be used easily. It is very simple to create different types of select box in Ionic 2.


bug: select is not checking the option with checked on it · Issue , brandyscarney added v2 labels on Jul 15, 2016 refactor(select): rename the checked attribute to selected on option … <ion-option value='male'>Keep data from view</ion-option> <ion-option value='female'>Remove data  http://technotip.com/5031/remove-element-on-click-ionic-2/ This is a basic example wherein we have a list of company names and once the user clicks on indivi


[4.0.0] ion-select interface="action-sheet" not refreshing the items , When an item is removed by click on Delete Color button, the model colors get updated. Ionic: ionic (Ionic CLI) : 4.10.0 Ionic Framework : @ionic/angular 4.0.0 bug: ion-select selected option is not rendered when using  Angular Select with group options and headers rendered as a hierarchy. With native look & feel, improved UX and source code. For Angular 2/4/5/6/7/8/9 and Ionic 2/3/4/5.