I have the following html
<ion-item>
<ion-range min="5" max="300" pin="true" [(ngModel)]="contrast" color="secondary" ionChange=“changeRange(contrast)”>
<ion-icon range-left small name="contrast"></ion-icon>
<ion-icon range-right name="contrast"></ion-icon>
</ion-range>
</ion-item>
the result is:
and this is the triggered method :
changeRange(valor){
console.log(valor.value);
}
Where, as you can see, I use the ionChange to execute the changeRange method. But when I run it, I get the following error.
what am I doing wrong?
I could not find the solution for this way of using the range.
But I was able to achieve the goal by changing in this way.
<ion-range min="20" max="300" color="secondary" (ionChange)="changeRange($event)">
<ion-icon range-left small name="contrast">20</ion-icon>
<ion-icon range-right name="contrast">300</ion-icon>
</ion-range>
and
changeRange(valor){
console.log(valor.value);
}
This is only a warning & it doesn't affect your application. You can just ignore it or you can try another plugin for the range component
Related
i added an icon in a text input, the icon is supposed to be clickable but after adding inside the text input it's no more clickable
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>
You need to place the <icon> element inside the <button> element.
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<!-- In Ionic 4 version it is used as follows. -->
<ion-button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</ion-button>
<!-- Used as below before "Ionic 4" release. -->
<button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</button>
</ion-input>
clickEventFunction(event: Event, id: any){
/* Something */
}
References
ion-button
Ionic API Documentation
inside you ts file take a boolean:
showPass: boolean = false;
in html:
<ion-item lines="none">
<ion-input type="{{showPass ? 'text' : 'password'}}" placeholder="Password" (ionChange)="inputChanged($event)" [formControlName]="formCtrlName"></ion-input>
<ion-icon name="eye-outline" slot="end" *ngIf="!showPass" (click)="showPass = !showPass"></ion-icon>
<ion-icon name="eye-off-outline" slot="end" *ngIf="showPass" (click)="showPass = !showPass"></ion-icon>
</ion-item>
A simple way of making a clickable icon in an ion input.
So im using ionic with the firebase data and i have to load a lot of it.
And because of this massive data to load, not all images appear (As you can see on the screen shot).
So... what should i do and is it possible to lazy load the cards with the data.
there is my code
<div *ngIf="postcall1">
<ion-card (swipeleft)="goTochat(postscall1)" *ngFor="let postscall1 of postcall1">
<img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />
<ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>
<ion-button mode="ios" class="this-button" color="light" fill="clear">
<ion-icon slot="icon-only" [name]="heartType"></ion-icon>
</ion-button>
</ion-card>
</div>
and i have these 3 firebase function to load
ngOnInit() {
const postcall = this.aff.httpsCallable('postscall')
this.sub = postcall({}).subscribe(data => {
this.postcall = data
console.log("postcall");
console.log(this.postcall);
})
///
const postcall1 = this.aff.httpsCallable('postscall1')
this.sub = postcall1({}).subscribe(data => {
this.postcall1 = data
console.log("postcall1");
console.log(this.postcall1);
})
}
thank you in advance
As you are using Ionic, put your items in an Ion virtual scroll.
In the documentation, it is clearly explained that only the necessary elements will be loaded.
For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls.
Not tested code below, but this example might help you.
<ion-virtual-scroll [items]="postcall1">
<ion-card *virtualItem="let postscall1">
<img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />
<ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>
<ion-button mode="ios" class="this-button" color="light" fill="clear">
<ion-icon slot="icon-only" [name]="heartType"></ion-icon>
</ion-button>
</ion-card>
</ion-virtual-scroll>
i want to position a div with the id "first" to the right of another div with the id "second" how to do that ?
<ion-col>
<div id="second">
<ion-img src="./assets/images/from_to.svg" style="height:30%;width:10%;"></ion-img>
</div>
<div id="first">
<ion-label>Domicile</ion-label>
<ion-label >120 Square de la Couronne,Paris</ion-label>
</div>
</ion-col>
First of all, I suggest you lessen the use of the basic html, for example, try using instead of .
Second, you practically never use id with html tags.
Now to answer your question, a little bit more code would help but here's one solution:
HTML:
<ion-col>
<ion-item class="second">
<ion-image class="img" src="/assets/images/from_to.svg" />
</ion-item>
<ion-item class="first">
<ion-label>Domicile</ion-label>
<ion-label>120 Square de la Couronne,Paris</ion-label>
</ion-item>
</ion-col>
CSS:
.first{
float: right;
}
.second{
float:left;
}
I assume that you already know that "HTML" goes to your x.page.html and the "CSS" goes to your x.page.scss of the same folder.
Looks like you want to create a list containing an image with an description on the right side on every element. If that's the case try ion-list which offers interacting with the list elements much easier, since you can use the included swiping, dragging within the list, and deleting items.
Example:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
</ion-list>
I have created a form. but how to get selected values in function.
i used dropdown, in that selected value need to send to the function.
product_option[{{tms.productoption_id}}],
optnslist.product_optionvalue_id this two value need to send to function
Html code:
<form (ngSubmit)="logForm(myfoem)">
<ion-grid *ngIf="varibleprd == 'variable'">
<ion-item *ngFor="let tms of optionprd;">
<ion-label>{{tms.option_name}}:</ion-label>
<ion-select [(ngModel)]="tms.option_name" name="product_option[{{tms.productoption_id}}]">
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id">{{optnslist.optionvalue_name}}</ion-option>
</ion-select>
</ion-item>
</ion-grid>
<button block><ion-icon name="add"></ion-icon></button>
</form>
and Ts code:
export class ProductdetailPage {
frmdata:any;
subfrmdata:any;
logForm(subfrmdata){
this.frmdata=subfrmdata.value;
console.log(this.frmdata);
}
}
Please try the below. This might help you:-
In HTML file
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id"
(ionSelect)="logForm(product_option[tms.productoption_id], optnslist.product_optionvalue_id);">
{{optnslist.optionvalue_name}}</ion-option>
Then in the ts file:-
logForm(productoption_id, product_optionvalue_id){
// Do the needful
}
I have a popover with ion-content. That content is replicated over a *ngFor with a maximum height of the ion-content to 400px. When the new content is added (from a user search) the scroll doesn't work properly on iOS. See below:
Chrome and Safari on my computer (working correctly):
On iOS, it is not setting the scroll area properly, same code. What you will see is I try to scroll to see the bottom of the list, but it bounces back up each time as if I were at the bottom of my content:
I tried putting it in an ion-list as well, I don't really want to do that though. It didn't work either.
Here is the HTML (scrollable is verified true, get-user-location class just sets max height to 400px):
<ion-content [scrollY]="scrollable" class="get-user-location">
<form [formGroup]="form">
<h5 padding no-margin *ngIf="message">{{ message }}</h5>
<ion-item>
<ion-input
color="primary"
(keyup.enter)="searchClicked()"
formControlName="search"
></ion-input>
<ion-button (click)="searchClicked()" fill="clear"
><ion-icon onclick="searchClicked()" name="search" slot="icon-only"></ion-icon
></ion-button>
</ion-item>
<ion-item *ngIf="searchStatus">
{{ searchStatus }}
</ion-item>
<ion-radio-group formControlName="radio" (ionSelect)="radioSelected($event)">
<ion-item *ngFor="let searchResult of searchResults; let i = index">
<ion-radio mode="md" value="{{ i }}" margin-end></ion-radio>
<ion-label>{{ searchResult!.name }}</ion-label>
</ion-item>
<ion-item>
<ion-radio mode="md" value="city" margin-end></ion-radio>
<ion-label>Default city listed below</ion-label>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-select
okText="Okay"
cancelText="Dismiss"
formControlName="city"
(ionChange)="cityChanged($event)"
>
<ion-select-option *ngFor="let city of cities" [value]="city.id">
{{ city.name }}
</ion-select-option>
</ion-select>
</ion-item>
<ion-button
*ngIf="showSubmit"
(click)="dismiss()"
[disabled]="!form.valid"
fill="clear"
class="button-padding-start large"
margin
>Submit</ion-button
>
</form>
</ion-content>
It's a bug:
https://github.com/ionic-team/ionic/issues/16910
Remove ion-content and add this to your component's scss:
.backdrop-no-scroll ion-content {
--overflow: hidden;
}
Try
<ion-content no-bounce has-bouncing="false">
...
</ion-content>
I found out that if it's a ionic bug on iOS, there are multiple ways to "resolve" the issue.
(recommended) First:
Add a couple of empty ion-item at the end of the list with the property lines="none" (<ion-item lines="none"></ion-item>)
(I do not recommend) Second:
Set no-bounce has-bouncing="false" to the ion-content
(I do not recommend) Third:
Remove ion content and add to the CSS file .backdrop-no-scroll ion-content { --overflow: hidden; }