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";
    show = false;

    @ContentChild(ShowHideInput) input: ShowHideInput;

    constructor(){}

    toggleShow()
    {
        this.show = !this.show;
        console.log(this.input); //undefined
        if (this.show){
            this.input.changeType("text");
        }
        else {
            this.input.changeType("password");
        }
    }
}

The following plunker link which i have created.

https://plnkr.co/edit/2GK79PuPtRQNmoUbF6xC?p=preview

Answer 1

This is a better answer. Check below:

input

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

click action

<button (click)="password()">{{show ? 'Show' : 'Hide'}}</button>

component

// variable - default false
show: boolean = false;

constructor() {
}

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

Answer 2

You could also do all of this in the template in a quick and dirty way..

<input #x type="password">
<button (click)="x.type=x.type=='password'?'text':'password'"></button>

Answer 3

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

Answer 4

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 5

in you html :

<div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" #password-field>
    <span (click)="password-field.type=password-field.type=='password'?'text':'password'" 
    class="fa fa-fw field-icon toggle-password"
        [ngClass]="(password-field.type=='password')?' fa-eye':' fa-eye-slash'"></span>
</div>

in your css or sass

.field-icon {
  float: right;
  left: -15px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}