Show and hide the password in angular

Because life's too short to waste time re-typing passwords. Click on the eye icon to view the typed password using angular/Javascript. here we go!

your html/markup looks something like this:

<div class="md-form form-sm password-div">

<!-- toggling input type from 'password' to 'text' using ternary operator -->
<input type="{{showPassword ? 'text' : 'password' }}" class="form-control form-control-sm">
 <label>Password</label>

 <a (click)="togglePassword()" class="eye-b">
  <i class="{{showPassword ? 'fas fa-eye-slash' : 'fas fa-eye' }}"></i>
 </a>

</div>

your ts/js looks something like this:

showPassword: boolean = false;

public togglePassword() {
    this.showPassword = !this.showPassword;
  }

your scss/css looks something like this:

.password-div{
  position: relative;
 .eye-b {
  color: #ccc;
  position: absolute;
  top: 9px;
  right: 10px;
 }
}

That's all folks :)