Ionic 2 select: remove selected option

Question

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

Answer 1

@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.