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

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

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>