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.
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 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/
the code is like this:
<ion-list>
<ion-item>
<ion-label>account</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>
<ion-item>
<ion-label>password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item *ngIf="needIp">
<ion-label>your server ip:</ion-label>
<ion-input type="text" [(ngModel)]="serverIp"></ion-input>
</ion-item>
</ion-list>
and which is show in browser like this.
and when i set the browser toogle device toolbar with android mode, the content in ion-label did not disappear, like this.
i don't why, when i build this project with a app,the ionic app can show normally . but when i run the project with "ionic serve" command, and run it in chrome, there will is a bug in ion-label.
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>
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.