I have two ion select and I would like to capture the value of each select from the TS when I click a button. Please help
part of code:
<ion-item>
<ion-label class="lbReward" color="dark" >Reward Type: </ion-label>
<ion-select (ionChange) = "onChange()" [ngModel] = "selectedRewardType">
<ion-option value="priceDiscount">Total Price Discount</ion-option>
<ion-option value="categoryDiscount">Category Price Discount</ion-option>
<ion-option value="freeGiftwithPrice">Sufficient Price Free Gift</ion-option>
<ion-option value="freeGiftwithMeal">Meal with Free Gift</ion-option>
</ion-select>
</ion-item>
Related
We upgraded our app from v5 to v6, we have a page where we are displaying expandable items and we thought we would make use of the newly introduced ion-accordion, the problem is on page load all the items are collapsed, I want the first item expanded while all the other items are closed. Are there any attributes I can set on ion-accordion to achieve this?
if you set the value for with the name of the accordion the default will be the mentioned accordion Expanded
<!-- Multiple Accordions -->
<ion-accordion-group [multiple]="true" [value]="['colors', 'numbers']">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header">
<ion-label>Numbers</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>one</ion-label>
</ion-item>
<ion-item>
<ion-label>two</ion-label>
</ion-item>
<ion-item>
<ion-label>three</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
in this case Accordion "Colors" and "Numbers" are Expanded.
if you want only the first one delete numbers from [value]="['colors', 'numbers']"
After going through the official documentation I just found that you can have an item expanded by default using the value attribute on ion-accordion-group tag.
<ion-accordion-group value="colors">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
Note the value in ion-accordion is equal to that in ion-accordion-group.
I am trying to add a country code where when you press on the selector under the "country" label, in the second picture, you get a list like the first picture with the country names and the flags next to it then you would be redirected to the second picture with the selector displaying the selected country flag and the country code. I tried to use
Html
<ion-row>
<ion-col>
<ion-item (click)="openSelect()">
<div class="ion-text-left">
<ion-label position="stacked">البلد</ion-label>
<ion-input [(ngModel)]="selectedCode"></ion-input>
</div>
</ion-item>
<ion-item style="display: none">
<div class="ion-text-left">
<ion-label >البلد</ion-label>
<ion-select #select1
[(ngModel)]="selectedCode">
<ion-select-option *ngFor="let c of countries" value="{{c.flag}}{{c.code}}">{{c.flag}}{{c.name}}</ion-select-option>
</ion-select>
</div>
</ion-item>
</ion-col>
.TS
#ViewChildren('select1') select1: Select;
countries: any = [
{
code: '+91',
flag: [./in.png],
name: 'India'
},
{
code: '+1',
flag: [./US.png]
name: 'America'
}
];
openSelect() {
setTimeout(() => {
this.select1.open();
}, 150);
}
for selecting the country code value you can use [value] property of ion select option
and for displaying the selected value you can use [selectedText] property of ion select in ionic 4/5
you can find official documentation here
<ion-select formControlName="country" [selectedText]="signupform.controls.country.value" name="country" #countryselect id="countryselect">
<ion-select-option *ngFor="let country of countries" [value]="country.id">
{{country.name}}
</ion-select-option>
</ion-select>
Im using ionic 3 for my mobile application. I have an issue with my item list, my issue is when i add a new item it does not show up at the top of the list, it always appears at the bottom , how to do that correctly?
Thanks
example
add Item -
first -A
second-B
its display
A
B
I want to know how can display this type
B
A
item list
<ion-list class="ion-addexe">
<ion-item *ngFor="let bill of Details">
<ion-label>
<p class="ion-lbl" style="position: relative;top:-0.2rem;">{{bill.billdescription}}</p>
</ion-label>
<ion-label>
<p class="ion-lbl" text-right style="position: relative;top:-0.2rem;">$ {{bill.billtotal}}</p>
</ion-label>
</ion-item>
</ion-list>
add item
<div>
<ion-item >
<ion-label id="ion-lbls">Select you want</ion-label>
<ion-select [(ngModel)]="addnewBill_category" okText="Add" cancelText="Close">
<ion-option *ngFor="let bill of Category" value="{{bill.billCategoryID}}">{{bill.CategoryName}}</ion-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Details</ion-label>
<ion-input type="text" value="" [(ngModel)] = "addnewBill_description" placeholder="Description" text-right></ion-input>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.addnewbill_Date" placeholder="MMM/DD/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label id="ion-lbls">Total ($)</ion-label>
<ion-input type="number" [(ngModel)]="addnewBill_amount" value="" placeholder="$0.0" text-right></ion-input>
</ion-item>
</div>
</ion-list>
First of all that is the correct way in which a ngFor works it displays the first element first and the next items at the bottom, because whenever you insert new items inside an array it follows the top to bottom approach. So basically you want to display your array items in reverse order that should be your question
The most simple and easy solution to this is by just using reverse() on your *ngfor. In your case it would be something like this:
<ion-item *ngFor="let bill of Details.reverse()">
...
<ion-item>
or one more solution is using a custom angular pipe which you could apply on the *ngFor and sort your array in reverse order.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value) {
if (!value) return;
return value.reverse();
}
}
and then in your html you can use that pipe like this:
<ion-item *ngFor="let bill of Details | reverse">
...
<ion-item>
I use ionic to create an android mobile application. But I have a problem with the select.
On the site of ionic, it can be seen that in the documentation, you can use <ion-select>, but strangely, when I try to use it nothing happens. The result is not the one expected, because it has no effect. <ion-select> is not triggering..
So I am forced to use this for now:
<select ng-model="form.city">
<option value="">Select</option>
<option ng-repeat="c in city" ng-value="c.id">{{c.name}}</option>
</select>
While I would like to have the same result as on the official website, with <ion-select>
Try this
<ion-select [(ngModel)]="form.city">
<ion-option *ngFor="c in city" value="{{c.id}}">
{{c.name}}
</ion-option>
</ion-select>
Try This its working fine for me
<ion-list>
<ion-item>
<ion-label>Users List</ion-label>
<ion-select [(ngModel)]="myUser" placeholder="Select your User">
<ion-option *ngFor="let user of users; let i = index" ng-value="user.id" >
{{user.name}}
</ion-option>
</ion-select>
</ion-item>
</ion-list>
Using model driven form to select default option, so residence is already set:
<ion-select formControlName="residence">
<ion-option [value]='"0"'>{{freeCalcForm.controls.partyAName.value}}</ion-option>
<ion-option [value]='"1"'>{{freeCalcForm.controls.partyBName.value}}</ion-option>
</ion-select>
I don't see the selected value:
But clicking on the ion-select shows that the value is already selected correctly:
I tried selected="true" and selected="selected" on first option without any effect.
You should bind a model to your select:
<ion-select [(ngModel)]="myModel">
and set your default selection in the model. For example:
// page.html
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
// page.js
export class BasicPage {
gender: string = "f";
}
Example truncated from here.