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 Add Firebase Analytics to Your NativeScript Mobile App

sidemenu refresh through events

push multiple data in array(select and disselect items in array)