The most easy way to show/hide a password input field in Angular is to toggle a show/hide property.
For both methods I will use the FontAwesome icon library but you are free to use the icons you prefer.
You can choose between two simple recipes, one with click event and one with mousedown/mouseup events:
Show/hide password field on click
The first ingredient is certainly the HTML in which the magic takes place.
<!-- app.component.html -->
<form>
<div class="form-group inner-addon right-addon">
<div class="input-group col-6 mx-auto">
<input name="password"
[type]="showPassword ? 'text' : 'password'"
class="form-control pwd-control"
id="password-field" placeholder="Password">
<div>
<i alt="show" class="far fa-eye eye-show"
(click)="showPassword = !showPassword"
[class.hide]="showPassword"></i>
<i alt="hide" class="far fa-eye-slash eye-hide"
(click)="showPassword = !showPassword"
[class.hide]="!showPassword"></i>
</div>
</div>
</div>
</form>
And then in the component we insert the property to be activated / deactivated.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public showPassword: boolean;
}
All with a pinch of css to style it:
/* app.component.css */
.hide {
display: none;
}
.inner-addon {
position: relative;
}
.inner-addon .far {
position: absolute;
padding: 10px 30px;
z-index: 100;
cursor: pointer;
}
.left-addon .far { left: 0px; }
.right-addon .far { right: 0px; }
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
This is the “click” version but maybe you want to show the password only by keeping the mouse pressed for security reasons.
In this case there is a second equally valid way.
Show/hide on mousedown/mouseup
The first ingredient is certainly the HTML in which the magic takes place.
<!-- app.component.html -->
<form>
<div class="form-group inner-addon right-addon">
<div class="input-group col-6 mx-auto">
<input name="password"
[type]="showPasswordOnPress ? 'text' : 'password'"
class="form-control pwd-control"
id="password-field" placeholder="Password">
<div
(mousedown)="showPasswordOnPress = !showPasswordOnPress"
(mouseup)="showPasswordOnPress = !showPasswordOnPress">
<i alt="show" class="fas fa-eye eye-show"
[class.hide]="showPasswordOnPress"></i>
<i alt="hide" class="fas fa-eye-slash eye-hide"
[class.hide]="!showPasswordOnPress"></i>
</div>
</div>
</div>
</form>
And then in the component we insert the property to be activated / deactivated.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public showPasswordOnPress: boolean;
}
All with a pinch of css to style it:
/* app.component.css */
.hide {
display: none;
}
.inner-addon {
position: relative;
}
.inner-addon .fas {
position: absolute;
padding: 10px 30px;
z-index: 100;
cursor: pointer;
}
.left-addon .fas { left: 0px; }
.right-addon .fas { right: 0px; }
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
Below is an example of what we have seen:
That’s all, to show/hide a password field in Angular.
Try it at home!
Only wanna comment that you have a very nice website , I the style and design it actually stands out.
There is definately a great deal to learn about this subject.
I do accept as true with all the ideas you have introduced for your post.