how to make icon inside text input clickable in ionic 5-CodePudding

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()"  </ion-icon>
</ion-input>

CodePudding user response：

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>

CodePudding user response：

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()" </ion-icon>
    </ion-button>

     <!-- Used as below before "Ionic 4" release. -->
     <button (click)="clickEventFunction($event, item.id)">
        <ion-icon [name]='eye-outline' (click)="togglePassword()" </ion-icon>
    </button>
</ion-input>

clickEventFunction(event: Event, id: any){
    /* Something */
}

Resources