Menu
I have a simple ion-select in my template. It is not a mandatory field hence not selecting any option is allowed.
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender" placeholder ="- Any -">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
I have placed a placeholder="any" and works just fine until user doesn't select anything. However, once user chooses one of the option and decides not to choose any again, user cannot go back to choosing none. I looked at the docs but couldn't get any clue. Any idea on how can user unselect the option once one of the option has been touched/chosen before?
486
ion-select Selects are form controls to select an option, or options, from a set of options, similar to a native <select> element. A select should be used with child <ion-select-option> elements. If value is set on the <ion-select>, the selected option will be chosen based on that value.
The checkMaster method will check/uncheck list items by iterating using forEach. The checkEvent will be available on every child list checkbox to calculate total checked items to handle the state of master checkbox. So using the above method we can easily create a nice check/uncheck all list in Ionic using new Indeterminate state.
Add the ion-checkbox Ionic component to configure the checkbox in an Ionic app. On the parent checkbox input field include indeterminate property to enable indeterminate state. It works on the boolean pattern and also don’t forgot to bind click event with ngModel. Attach Angular’s *ngFor directive to iterate a superheroes list.
The checkCheckbox () uses the forEach method to select and unselect all elements. The verifyEvent () method is counting total checked items and managing the main checkbox state. Finally, we have completed the Ionic 5 checkbox tutorial.
Easiest way is to add a third option of any or whatever you would like it to be
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender" placeholder ="- Any -">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
<ion-option value="">- Any -</ion-options>
</ion-select>
</ion-item>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With