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.
Related
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>
<ion-list>
<div>
<ion-list>
<div *ngFor="let itinerary of filteredItineraries">
<ion-card class="itinerary-module">
<ion-card-content *ngIf="itinerary.id !== selection.id">
<div>
<h2>{{itinerary.startDate | date: "MM/dd/yyyy"}} - {{itinerary.endDate | date: "MM/dd/yyyy"}}</h2>
</div>
<div>
<h1>{{itinerary.jobDesc}}</h1>
</div>
<div>
<h2>{{itinerary.jobCode}}</h2>
</div>
<ion-item lines="none">
<ion-icon slot="start" name="thumbs-down" (click)="removeItem(itinerary.id)></ion-icon>
<ion-icon slot="end" name="thumbs-up" (click)="removeItem(itinerary.id)" ></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
</div>
</ion-list>
</div>
</ion-list>
Is there a way to only display this list one item at a time...say index 0, then when I click one of the icons to remove the current item in index 0 so that index 1 then moves to 0 and is displayed on the screen?
Do not iterate over the loop and render. Just point the UI to first element filteredItenaries[0]
If you want to show the next item, call a function which has the implementation filteredIternaries.splice(0,1). So, therefore, the first element will be updated in the Array as well as in the UI.
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; }
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
I need to apply the sliding effect with these buttons. I have the following html:
<ion-row class="row-two-button">
<ion-col class="button-group">
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationA, light: travelDestinationB}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Centro
</button>
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationB, light: travelDestinationA}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Bairro
</button>
</ion-col>
</ion-row>
I need to make the slide effect in scss. I'm using ionic 3. If it does not work with my html code how can I do it with another type, a div or something like
When sliding it is also necessary to perform a function in angular 2 or angular 4