19

I wanted to create a design like this using ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ

Which is a login functionality that has a hide/show password.

Here's my HTML code

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-item>
      <ion-label floating primary>Username</ion-label>
      <ion-input type="text"></ion-input>
</ion-item> 
<ion-item>
      <ion-label floating primary>Password</ion-label>
      <ion-input type="password"></ion-input>
      <ion-icon name="eye" item-right (click)="showHide()"></ion-icon>
</ion-item> 
</ion-content>

And Here's the result -> http://prntscr.com/gz12xg

Here's my .ts code

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
  showHide() {
    console.log('hi');
  }

}

The Problem is, the eye icon, is not clickable. No log from the console.

When I click the eye icon, it only allows me to input from the password field.

Anybody can help me? I just want the eye icon to be clickable.

4 Answers 4

56

You can do like below in your .ts file write this code

 passwordType: string = 'password';
 passwordIcon: string = 'eye-off';

 hideShowPassword() {
     this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
     this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
 }

in your .html write this

<ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input formControlName="password" [type]="passwordType" clearOnEdit="false"></ion-input>
    <ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>

and this will be your .scss code. Change according to your need

.passwordIcon{
   font-size:2rem !important;
   position: relative !important;
   top: 22px !important;
   margin: 0 auto !important;
}
3
  • 13
    In ionic version 4 you should use ion-icon slot="end" instead of ion-icon item-end Apr 23, 2019 at 18:04
  • 3
    Best answer... Keep it up!
    – parrycima
    Jan 29, 2020 at 10:01
  • 1
    In ionic 4 the .scss wasn't necessary.
    – site
    Apr 23, 2020 at 20:48
9

You can simply wrap it in a button to make it clickable:

<ion-item>
  <ion-label floating primary>Password</ion-label>
  <ion-input type="password"></ion-input>
  <button ion-button clear item-end (click)='showHide()' style="height:32px;">
    <ion-icon name="eye" style="font-size:32px;"></ion-icon>
  </button>
</ion-item>

Use the style attributes to control the size of the icon.

0
3
public type = 'password';
public showPass = false;
showPassword() {
   this.showPass = !this.showPass;
   if(this.showPass){
     this.type = 'text';
   } else {
     this.type = 'password';
   }
}
<ion-item class="i2"no-lines>
   <ion-input type="{{type}}" name="password" [(ngModel)]="password" placeholder="Password" style="width: 40px;" no-lines>
   </ion-input>
   <button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
      <ion-icon name="eye" style="font-size:25px;"></ion-icon>
   </button>
   <button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
      <ion-icon name="eye-off" style="font-size:25px;"></ion-icon>
   </button>
</ion-item>
0
0

For me the following logic works into ionic react:

...all imports go here ...

const ComponentName: React.FC<RouteComponentProps> = ({ history }) => {
    
    const[showPassword, setShowPassword] = useState<boolean>(false)
    const[showPasswordIcon, setShowPasswordIcon] = useState<string>(eyeOffOutline)
    const[hidePasswordIcon, setHidePasswordIcon] = useState<string>(eyeOutline)


    const toggleShowPAssword = () =>{
        setShowPassword(!showPassword)
    }


{
    !showPassword ?
        <IonItem>
            <IonLabel position="stacked">Password</IonLabel>
                <IonInput value={password}  className="sample-pwd-field-class" type="password" onIonChange={(e:any) => setPassword(e.target.value) } >                        
            </IonInput>
            <IonButton className="transparent-bg-btn" color="light" onClick={() => toggleShowPAssword()}  slot="end">
                <IonIcon  icon={showPasswordIcon}></IonIcon>
            </IonButton>         
        </IonItem> : 
        <IonItem >
            <IonLabel position="stacked">Password</IonLabel>
            <IonInput value={password}  className="sample-pwd-field-class" type="text" onIonChange={(e:any) => setPassword(e.target.value) } >                     
            </IonInput>
            <IonButton className="transparent-bg-btn" color="light" onClick={() => toggleShowPAssword()}  slot="end">
                <IonIcon slot="end" icon={hidePasswordIcon}></IonIcon>
            </IonButton>                     
        </IonItem>
        }

Hope you should find it useful. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.