CODEWITHSUNDEEP
htmlcssionic-framework
CoderTn
CoderTn

Reputation: 997

how to make icon inside text input clickable in ionic 5

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>

Upvotes: 2

Views: 1132

Answers (3)

Sercan
Sercan

Reputation: 5081

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

Upvotes: 2

Ayyaz Khan
Ayyaz Khan

Reputation: 25

A simple way of making a clickable icon in an ion input.

password_hide_show

Upvotes: 0

Najam Us Saqib
Najam Us Saqib

Reputation: 3404

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>

Upvotes: 0

Related Questions