I'm trying to make ion-range with input. First, when I using ion-range it getting the right value(this.selectedNominal) but when I'm trying using ion-input to change the value it doesn't changing. It still using first ion-range value.
HTML
<ion-list-header>
Nominals
</ion-list-header>
<ion-item *ngFor="let b of listNom2">
<ion-range min="{{b.min}}" max="{{b.max}}" step="{{b.step}}" [(ngModel)]="nominal2" (ngModelChange)="optionsNominal(nominal2)" color="secondary">
<ion-label range-left style="font-weight: bolder;">{{ b.min | number:0 }}</ion-label>
<ion-label range-right style="font-weight: bolder;">{{ b.max | number:0 }}</ion-label>
</ion-range>
</ion-item>
<div style="text-align: center;margin-left:25%;margin-right:25%;padding-bottom:10px;">
<ion-input maxlength="8" type="tel" [pattern]="[0-9]" (ionChange)="setValue2(nominal2)" style="border:1px solid #FF9900;border-radius:5px;" [(ngModel)]="nominal2" (ionChange)="optionsNominal(nominal2)">Rp.{{ nominal | number:0 }}</ion-input>
</div>
TS
setValue2(nominal2) {
if(nominal2 == null || nominal2 == undefined || nominal2 == '') {
this.nominal2 = 0
} else {
this.nominal2 = parseInt(nominal2);
}
if (this.nominal2 > 50000000) {
this.nominal2 = 50000000;
} else if (this.nominal2 < 3000000) {
this.nominal2 = 3000000;
}
}
optionsNominal(value: any) {
if (value == NaN || value == null || value == undefined || value == '') {
this.selectedNominal = 0;
} else {
this.selectedNominal = value;
}
}
Related
I need help.. How can I show more words if something is longer than 20 characters?
<ion-list no-padding no-border no-margin>
<ion-item *ngFor="let item of items | async | reverse">
<ion-card no-padding no-border>
<img [src]="item.url" />
<ion-row>
<ion-item ion-start class="font">{{item.descrizione}}</ion-item>
</ion-row>
</ion-item>
</ion-list>
Now if {{item.descrizione}} is too long it simply doesn't show more. I thought that *ngIf {{item-descrizione.length}} > 20 could solve my problem but I don't know how to continue with show more/less text.
Thank you!
What about using pipes? This is something what I have done.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'truncate'
})
export class TruncatePipe {
transform(value: string, args: string[]) : string {
let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
let trail = args.length > 1 ? args[1] : '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
and Component class and template goes something like this
export class TruncatedTextComponent {
limit: number = 40;
truncating = true;
}
<div *ngIf="text">
<div *ngIf="text.length <= limit">{{text}}</div>
<div *ngIf="truncating && text.length > limit">
{{text | truncate : limit}}
<button ion-button (click)="truncating = false">show more</button>
</div>
<div *ngIf="!truncating && text.length > limit">
{{text}}
<button ion-button (click)="truncating = true">show less</button>
</div>
</div>
Happy new year for all of you.
I have a problem to update item in list using http request:
This is my code: in ts
ionViewWillEnter() {
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
this.run_scriptsvis = setInterval(() => {
if (localStorage.getItem('sessionnewvisites') === '1') {
this.getnewvisit();
localStorage.removeItem('sessionnewvisites');
console.log('refresh');
} else {
console.log('no refresh');
}
}, 3000);
}
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
console.log(this.datacool);
});
});
}
In my html i have this:
<ion-row no-padding>
<ion-col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12>
<ion-list no-margin>
<ion-item-sliding *ngFor="let user of datacool" (ionSwipe)="delete(user)">
<ion-item style="min-height:10vh" class="cardcolor item-tittle" no-padding text-wrap (click)="openprofile(user.userid)">
<div item-left no-margin>
<img style="max-width: 80px;margin-left: 7px;" src="{{user.tnpicture}}">
</div>
<div item-top>
<h2 text-wrap><img src="{{user.online}}"> {{user.username}}</h2>
</div>
<div class="span-small">
{{user.age}} ans, {{user.gender}}
</div>
<div item-bottom>
<div class="span-small" text-left><ion-icon name="pin"></ion-icon> {{user.countyname}}</div>
<div></div>
<h3 left padding-left>{{user.date}}</h3>
</div>
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="delete((user.id))" >delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-col>
</ion-row>
The code work good and do the update when there are new data.
The problem is that I don't want to revome the older item and replace it with the new.
I want the new item in the top and the old item in bottom of the new.
Thank you so much for helping me
Thanks i have found the solution
users2: any[] = [];
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
for (let i = 0; i < this.datacool.length; i++) {
this.users2.push(this.datacool[i]);
}
console.log(this.datacool);
});
});
}
I am trying to create an input where you can write a number with decimals.
I don't know how to make it so that a user cant insert two points characters.
Example
I want to prevent the user from writing 0.123445.5, only with one point: 0.123445
I have tried with ionic input properties like step="0.01" but I can't solve it.
EDIT: (SOLVED)
Instead using number, use type="string" and create a method to check number of points of the number.
Before:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="number" step="0.01" [(ngModel)]="CRP" (ngModelChange)="checkRules();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
Now:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="text" [(ngModel)]="CRP" (ngModelChange)="checkCRPkDecimals();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
checkCRPkDecimals() {
if (isNaN(parseFloat(this.CRP))) return;
let str:Array<string> = this.CRP.split(".");
if (str.length > 2) {
this.CRP = "";
return;
} else {
this.checkRules();
}
}
ion-input type text should only accept alphabets without using the form Builder.
<ion-item class="myitem">
<ion-input type="text" value="" placeholder="Full Name*" [(ngModel)]="fullname" maxlength="25"></ion-input>
</ion-item >
You can do it with html adding the pattern attribute to your input.
Alphabets and blankspace:
pattern="/^[a-zA-Z\s]*$/"
Alphabets no blankspace:
pattern="/^[a-zA-Z]*$/"
Alternate
[pattern]="'^[a-zA-Z \-\']$'"
alternately you can use,
<ion-input class=" " (keypress)="onKeyPress($event)"> </ion-input>
and
onKeyPress(event) {
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122) || event.keyCode == 32 || event.keyCode == 46) {
return true
}
else {
return false
}
}
it will work for me
I want to hide and show the textbox when the ion-select(combobox) is change
For example I have : 1 and 2 in ion-select
If i choose 1 the textbox will hide and if i choose 2 the textbox will appear
Here is my current code:
.ts
onChange(membership){
if (this.membership = '1'){
this.value = 1; }
else if (this.membership = '2'){
this.value = ""; }
}
HTML
<ion-list>
<ion-item>
<ion-label>Register as</ion-label>
<ion-select [(ngModel)]="membership" (ionChange)="onChange(membership)">
<ion-option value="1">member</ion-option>
<ion-option value="2">nonmember</ion-option>
</ion-select>
</ion-item>
</ion-list>
this is the textbox that i want to hide
<ion-item [hidden]="!value">
<ion-label floating>Email Address</ion-label>
<ion-input type="text" name="email" ></ion-input>
</ion-item>
When I'm opening the application the textbox is hiding and when i select from the combobox the textbox is showing but when I select the other item in the combobox its not hiding anymore.
It is just a simple error in onChange method. You are assigning the value with =, so it always returns true and set this.value to 1. You have to use double equals to verify equality :
onChange(membership){
if (this.membership == '1') {
this.value = 1;
} else if (this.membership == '2'){
this.value = 0;
}
}