SHOW HIDE PASSWORD IN IONIC3

login.html
<ion-item>
 <ion-label floating>Password</ion-label>
 <ion-input type="{{type}}" name="password" ngModel #password="ngModel" required pattern=".{4,10}"></ion-input>

 <button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> <ion-icon name="ios-eye-off-outline"></ion-icon></button>
 <button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> <ion-icon name="ios-eye-outline"></ion-icon></button>

</ion-item>
export class AuthenticPage {

  public type = 'password';
  public showPass = false;


  showPassword() {
    this.showPass = !this.showPass;

    if(this.showPass){
      this.type = 'text';
    } else {
      this.type = 'password';
    }
  }
}

Comments

Popular posts from this blog

how to split array as per fixed length, and ionic two dates differences in min,seconds,hours

How to Add Firebase Analytics to Your NativeScript Mobile App