Detect click event on icon inside input in Angular-CodePudding

i added a clickable ion-icon inside an input

 <ion-input (ionChange)="inputChanged($event)" [type]="inputType">
        <ion-button fill="clear"  (click)="togglePassword($event)">
             <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'"> </ion-icon>
        </ion-button>
  </ion-input>

the problem is that the click event on the icon is only detected when the text input is not on focus, once the input is on focus and you click on the icon there is no click event triggered after it, how can I detect the click event on the icon even when the input is on focus?

CodePudding user response：

You should wrap them inside <ion-item>

E.g:

<ion-item lines="none">
   <ion-input type="{{isPasswordHidden ? 'text' : 'password'}}" placeholder="Password"></ion-input>
   <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'" slot="end" (click)="isPasswordHidden = !isPasswordHidden"></ion-icon>
</ion-item>