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.
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
The reorder function seems to be attaching reorder icons to all the nested items within my ngFor list. So with 2 items being a checkbox and a text-input, I get 2 extra (3 total) reorder icons per list item. Only one of them works, the other two are just visual. I need to remove the other 2 and just have one clean reorder icon per item, or something to that effect.
I have tried removing the nested items, but the checkbox and text-input don't work.
/// Here is the HTML ///
<ion-list no-lines [reorder]="reorderIsEnabled" (ionItemReorder)="itemReordered($event)" id="lowtrimlist">
<ion-item-sliding *ngFor="let task of tasks; let taskIndex = index">
<ion-item>
<ion-row>
<ion-col col-1>
<ion-item no-lines>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-col>
<ion-col col-11>
<ion-item>
<ion-textarea>
</ion-textarea>
</ion-item>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger"(click)="delete()">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
What I'm looking for is there to be one single reorder icon per line item, but instead there are 3. It seems like the reorder function picks up and tries to label every internal item.
Follow an Ionic 4 tutorial
Based on your comments it's not clear where you have got your method from but it's not what the documentation says, and it's not what I have seen before.
I suspect you are using some kind of legacy support mode from earlier version of Ionic.
I actually just learned to use ion-reorder myself recently and I followed this tutorial:
https://www.freakyjolly.com/ionic-4-ion-reorder-list-drag-drop-sorting-list-in-ionic-4-using-ion-reorder-component/
Did you paste the right html snippet?
I would expect to see a combination of ion-reorder-group and ion-reorder like this:
<ion-list>
<ion-reorder-group (ionItemReorder)="onReorderItems($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
Test
As a test I just put an extra ion-item inside the ion-item above and ran it in a little game I made recently:
<ion-list>
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-item>inner item</ion-item>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
It rendered ok:
Implementing programmatically?
All of this is leading me to think that its a coding error. Are you trying to implement the reordering programmatically?
Please share your snippet but you just need to use the ion-reorder-group, ion-reorder and disable="false" to display it.
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/
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.