show/hide password text using angular2

Question

i want to show/hide the password text based on the user click. But i am getting the following error saying:

export class App {
    password = \"secret\"         


        

Answer 1

You could do something like this:

In your App class.

   _show = false
   _pwdType = 'pwd'

   toggleShow() {

      this._show = !this._show
      this._pwdType = this._show ? 'text' : 'password'

   }//toggleShow

In your html

 <input [type]="_pwdType" class="form-control" ...etc">

Having said that I like @codtex's answer better

Answer 2

You need to use ViewChild() instead of ContentChild()

@ViewChild(ShowHideInput) input: ShowHideInput;

check your plunk

ContentChild() is for matching inside the transcluded content. e.g. contents inside <ng-content></ng-content>

Answer 3

I see that in the approach from the question functionality is implemented directly in the component where the <input> is and just for the record I want to share a more elegant approach - creating a component for the purpose

Check the demo plunkr HERE, can be useful for others.

Cheers!

Answer 4

//In HTML
<div>
<input [type] = "passType" placeholder="password">
</div>

<input type = "checkbox" (click)="changePasswordType()">Show Password

//In TS file
passType: string = 'password';

changePasswordType(){
if(this.passType== 'password'){
this.passType= 'text'
}else{
this.passType== 'password'
}
}

Answer 5

This is a better answer. Check below:

input

<input [type]="show ? 'text' : 'password'" />

click action

<button (click)="password()">Show</button>

component

// variable
show: boolean;

constructor() {
   // initialize variable value
   this.show = false;
}

// click event function toggle
password() {
    this.show = !this.show;
}

Answer 6

<input [type]="show_button ? 'text' : 'password'">
<i [class]="show_eye ? 'fa fa-eye' : 'fa fa-eye-slash'" (click)="showPassword()"> // Modify style as you need

 // variable
  show_button: Boolean = false;
  show_eye: Boolean = false;

//Function
showPassword() {
    this.show_button = !this.show_button;
    this.show_eye = !this.show_eye;
  }