How to create login in ionic 2 with show/hide password

Question

I wanted to create a design like this using ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ

Which is a login functionality that has a hide/show password.

Here\

Answer 1

You can do like below in your .ts file write this code

 passwordType: string = 'password';
 passwordIcon: string = 'eye-off';

 hideShowPassword() {
     this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
     this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
 }

in your .html write this

    Password
    
    

and this will be your .scss code. Change according to your need

.passwordIcon{
   font-size:2rem !important;
   position: relative !important;
   top: 22px !important;
   margin: 0 auto !important;
}