I have 1 ion-datetime and 1 ion-select. Based on what is selected for ion-datetime, it will call backend API to retrieve values for ion-select. The date selected can be the same, but based on the API submission timing, the date returned back can be different.
<ion-item >
<ion-label>Date: </ion-label>
<ion-datetime class="dateInput" displayFormat="MMM DD YYYY"
[(ngModel)]="dateList" (ionChange)="retrieveValues()">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label>Values: </ion-label>
<ion-select [(ngModel)]="valueList" (ionChange)="changeValue()">
<ion-select-option*ngFor="let value of valueList" [value]="value">{{value}}
</ion-select-option>
</ion-select>
</ion-item>
How do I trigger (ionChange)="retrieveValues()" even if the date selected is the same? Currently it only runs when the selected date is different from previous.
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 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>
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 know this seems easy, but I could not find any answers for my question.
How can I set the min and/or max attributes to ion-datetime, but only for time picker?
<ion-row>
<ion-col no-padding>
<ion-item no-padding>
<ion-label floating>Time In:</ion-label>
<ion-datetime pickerFormat="hh:mm A" [(ngModel)]="ptReEvaluation.content.iprTimeIn"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
please try it
<ion-row>
<ion-col no-padding>
<ion-item no-padding>
<ion-label floating>Time In:</ion-label>
<ion-datetime pickerFormat="hh:mm A" [(ngModel)]="ptReEvaluation.content.iprTimeIn" in="2016" max="2020-10-31"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
i hope its work for you.
You should try this. In file.ts, declear
private minyear : string = (new Date().getFullYear()-1).toString();
private maxyear : string = (new Date().getFullYear()+1 + '-' + new Date().getMonth()+1 + '-' + new Date().getDate()).toString();
And in html side include as
<ion-datetime displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" [(ngModel)]="filter_param.start_date" placeholder="From" (ionChange)="validate_date_range()" [min]="minyear" [max]="maxyear"></ion-datetime>
<ion-datetime displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" [(ngModel)]="filter_param.end_date" placeholder="To" (ionChange)="validate_date_range()" [min]="minyear" [max]="maxyear"></ion-datetime>
I have put code on my conditions, you can append it to, with your requirements.
I tried this approach to get my bug cracked after crushing 6-7 days. In my case, I have to pass the getMinimum value as the minimum time while checking out. So users should not be able to check-out before the check-in time.
.ts File
check_in_value: 2021-12-06T13:15:11.684Z
const a = parseISO(check_in_value);
const b = addHours(new Date(a),5);
this.getMinimum = b.toISOString()
concole.log(this.getMinimum)
HTML File
<ion-datetime
displayFormat="YYYY-MM-DD HH:mm"
pickerFormat="YYYY-MM-DD HH:mm"
[value]="check_out"
[min]="getMinimum3"
></ion-datetime>
Important Notes:
The Displaying Format plays an important factor in rendering the Date and Time. Read the documentation thoroughly. “Ionic Framework uses the ISO 8601 datetime format for its value”. Link: ion-datetime: Ionic API Input for Datetime Format Picker
“Exactly the components shown here must be present, with exactly this punctuation” Link: https://ionicframework.com/docs/api/datetime?_gl=1*1lg7t6u*_ga*MTk3MzQ4NzM5Ny4xNjQxODg2ODQy*_ga_REH9TJF6KF*MTY1MDMyNDM1MS4xMTIuMS4xNjUwMzI2NjU0LjA.
“Exactly the components shown here must be present, with exactly this punctuation” Link: https://www.w3.org/TR/NOTE-datetime
I have 2 select in ionic 2 and i am able to dynamically populate the second based on the value selected in first. but i cannot set the selected default option after the population. i tried:
<ion-item>
<ion-label>City</ion-label>
<ion-select (ionChange)="setCity($event)">
<ion-option selected >City1</ion-option>
<ion-option >City2</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Zona</ion-label>
<ion-select >
<ion-option *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
</ion-item>
in .ts
this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}],
'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]}
setCity(event){
this.city = event;
}
there is no selected value after the second ion-select is populated
thank you.
Try setting the ngModel attribute in ion-select and value attribute in ion-option like below
<ion-label>Zona</ion-label>
<ion-select [(ngModel)]="mLocation" >
<ion-option [value] = "location" *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
Create a change event handler on the first select element. Then have that call a method, passing the selected value with it. Then do some checks on the selected values to determine if you want to show the next select and then the list.
Check out this StackOverflow question How to show second dropdown data based on previous dropdown selection
Working version: https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/
UPDATE Display Default selected item
You wanna display Default selected item then you need to add these few line in your html page
like that:
<ion-label>District</ion-label>
<ion-select (ionChange). ....
<ion-option [value]="0" >select District</ion-option>
<ion-option [value]="sDistrict" *ngFor = ...
</ion-select>
and add these line in your type script(.ts) file
export class HomePage {
....
sState: number = "0";
sDistrict: number = "0";
.....
}
if you face any problem then let me know.