I'm dabbling in Ionic for the first time, learning from the beginning using the components documentation, and I got stuck with this error:
Template parse errors:
'ion-option' is not a known element:
When using a select component in this way:
<ion-select [(ngModel)]="gaming">
<ion-option value="nes">NES</ion-option>
</ion-select>
I have searched and found solutions like this: Ionic button showing 'ion-button' is not a known element
however, using something like <option ion-option value="nes">NES</option> doesn't work.
Even, I include the schemas: [CUSTOM_ELEMENTS_SCHEMA] line in my module, but no options are showed.
I'm using:
ionic (Ionic CLI) : 4.5.0
Ionic Framework : #ionic/angular 4.0.0-beta.16
I'll be grateful if someone can help me.
<ion-item>
<ion-label>Hair Color</ion-label>
<ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>
ionic 4 has changed its syntax.
I used below code and got it working.
Ionic 4
<ion-item>
<ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>
Use 'ion-option' instead of 'ion-select-option'.
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="this.gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
It works for me as expected.
Thank You
Remember to use as the documentation suggest, if you're new just follow the examples.
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
Also if you need modify or a complex behavior, the Api Docs is your best ally.
API Select Ionic
https://ionicframework.com/docs/api/components/select/Select/
Related
Working with Ionic version 3.
html example:
<ion-list>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming">
<ion-option value="nes" class="tored" style="color:red"><span>NES</span> </ion-option>
<ion-option value="n64">Nintendo64</ion-option>
<ion-option value="ps">PlayStation</ion-option>
<ion-option value="genesis">Sega Genesis</ion-option>
<ion-option value="saturn">Sega Saturn</ion-option>
<ion-option value="snes">SNES</ion-option>
</ion-select>
</ion-item>
</ion-list>
My purpose is to change (CSS) specific option values with style or class.
I tried to search here or from documentation for a solution but I didn't find anything useful.
if you're looking for change the css based on a value you can use , ngClass or ngStyle
see this link
[ngClass]="value==='yourValue'?'ClassA':'ClassB'"
and you can also review official docs for NgClass and NgStyle
I'm creating a simple form with ionic 3 but I get a wrong focus position on the very first ion-input. Here is a screenshot of the problem :
You can see that the blue cursor is not positioned on the ion-input. But my code seems to be ok :
<ion-content padding>
<ion-list>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="username" placeholder="Your Username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Other Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="snap_username" placeholder="Your Other Username"></ion-input>
</ion-item>
</ion-list>
</ion-content>
Anyone knows a solution to this issue?
Seems like I found the solution.
If it can help someone, the issue disappeared after I installed the WKWebview plugin.
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?
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>
Ionic-2 ion-select with popover is not working, but it works with action-sheet interface. The code is simple. I don't want those ok and cancel buttons.
<ion-item>
<ion-label floating>
Selection Label
</ion-label>
<ion-select interface="popover">
<ion-option selected>
option1
</ion-option>
<ion-option>
option2
</ion-option>
</ion-select>
</ion-item>
Ionic Info
popover
action-sheet
In order to use interface="popover" as a property, ionic-angular version should be 3.1.0 or later.
Have a look at 3.1.0 changelog.
i have simple html modal created with select and date field, but not able to see alert or action sheet interface when opened modal form
below is the html code
<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>
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>
i am getting output as below, showing both the values instead of dropdown.
what is missing in my code.