ANGULARJS2 ng2 Password Hidden display

Code in conjunction with IONIC2 Development Mobile Project, the password of the registration page input is generally used password,

However, when the user enters the password, it may enter an error and need to be displayed as text.

First, the type of the input box is judged;

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

Then, add eye Click event, Ngclass judging icon style;

1 <ahref= "javascript:;"item-end (click)= "Pwshow=!pwshow"[Ngclass]= "Pwshow?" Eyeshow ': ' Eyehide ' ">2    <Ion-iconname= "Ios-eye-off"Color= "Dark"class= "Eye-hide"></Ion-icon> <!-- Close-up icons--3    <Ion-iconname= "Ios-eye"Color= "Dark"class= "Eye-show"></Ion-icon> <!--open-Eyes icon --4 </a>

Finally, attach the Ngclass style, the icon of the hidden display.

1 . Eyehide. Eye-hide,. eyeshow. Eye-show {2   display: block;  3}4. Eyehidee. Eye-show,. Eyeshow. eye-hide{5   display:  None; 6}

The following is attached haha.

Initial state

After opening the eyes

ANGULARJS2 ng2 Password Hidden display