Implement Show Hide Password in Ionic/Angular
Written by Samiullah Khan on 27 February 2018
We are required to create secure passwords. For secure password we need to follow some strict rules. Some of these rules are:
– At least one uppercase alphabet
– At least one special character
– At least 12 characters
and the list goes on.
While keeping these requirements, visitors to your website can have a typo. That’s because password fields are hidden by default.
How often a user will reset his password process. Which mostly results in to abandoning an ecommerce purchase and a loss to the business.
You can read more about this show/hide password pattern over masking password.
I have recorded a live coding session where I have used Ionic to add show/hide password functionality to the existing login form. This post continues after the video discussing some other key points regarding angular.
Initially I went with directly changing the attribute of the input element using native element with following markup
In the video I used the ion-input but in the above screenshot I’m using regular html element. That’s because local template reference variable doesn’t work with ionic components. Here’s the code to access native element
or using platform renderer (Platform renderer makes your code platform agnostic while elementRef only works in web environment)
But again, I found property binding solution easier and straight forward.