facebook-squared twitter-squared rss-squared gplus-squared

Tuesday

27

February 2018

2

COMMENTS

Implement Show Hide Password in Ionic/Angular

Written by 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.

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 Comments

  1. NIsar

Leave a Reply to NIsar Cancel reply

%d bloggers like this: