Angularjs2 ng2 password hidden display instance code, angularjs2ng2

Angularjs2 ng2 password hidden display instance code, angularjs2ng2

Angularjs2 ng2 password hidden display code used in combination with ionic2 to develop a mobile project. The input of the password on the registration page generally uses password, but the user may enter an error when entering the password, which must be displayed as text.

First, the type of the input box is determined;

<Ion-input type = "{pwshow? 'Text': 'Password'} "placeholder =" Enter password "> </ion-input>

Then, add eye click events, and ngClass judges the icon style;

<A href = "javascript:;" rel = "external nofollow" item-end (click) = "pwshow =! Pwshow "[ngClass] =" pwshow? 'Eyeswho ': 'eyehide '"> <ion-icon name =" ios-eye-off "color =" dark "class =" eye-hide "> </ion-icon> <! -- Close-eye icon --> <ion-icon name = "ios-eye" color = "dark" class = "eye-show"> </ion-icon> <! -- Eye opening icon --> </a>

The ngClass style is attached to hide the icon.

.eyehide .eye-hide, .eyeshow .eye-show{  display: block;}.eyehidee .eye-show, .eyeshow .eye-hide{  display: none;}

Haha is attached below ..

Initial status

After opening your eyes

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.