How to create login in ionic 2 with show/hide password

Question

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\

Answer 1

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>

Answer 2

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.

Answer 3

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;
}