Show and hide the password in angular
Click on the eye icon to view the typed password using angular/Javascript.
Published
•1 min read
M
I am a Full Stack Developer working on Next Generation Software, Web & Mobile Technologies since 8+ years. Have a look on my portfolio: https://linktr.ee/mawaisshaikh
- I am Pakistan’s first AWS DevAx Mentor and an Auth0 Ambassador.
- Community Member (Google Developer Groups).
- Community Member (Angular).
- An open-source contributor. 💻
- Tech speaker. 🎤
- Mentor. 🚀
I have spoken at multiple international community events including google developer groups like #gdgSoweto, #AngularDutch, #ngKolachi as well 🙌
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 :)
544 views
