Implement Show Hide Password in Ionic/Angular

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.

Live Coding

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.

Other ways

Initially I went with directly changing the attribute of the input element using native element with following markup

template variable in angular forms

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

native element using elementref angular

or using platform renderer (Platform renderer makes your code platform agnostic while elementRef only works in web environment)

native element using platform renderer angular

But again, I found property binding solution easier and straight forward.

2 replies on “Implement Show Hide Password in Ionic/Angular”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.