Hello there!

A few days ago, I had to help our users on one of our products get their password right on the first try and some people, as I have observed, do not like not being able to see what they are typing, hence the need for this feature.

In this write-up, I hope to show you how to create a show or hide feature in your password input in Angular forms.

Our arsenal for the adventure

• The wonderful Angular Reactive forms
• The ngClass directive
• A bit of Bootstrap's beauty
• Awesome Fontawesome icons

Ok, let's get serious...

First, we create a new angular project. I have angular version 8 installed globally in my machine, but you can still follow along.

                           ng new show-hide-password

You'd get a few prompts about routing, stylesheets and git initialization, you can do as you please.

Installation of packages

After the creation process was completed, I opened the project in my text editor to begin the necessary installations, starting with Bootstrap using npm. This repository branch has the necessary information for the Bootstrap version installed. I installed Fontawesome as well since we will be using the icons available. The command below would suffice.

                            npm i bootstrap font-awesome

• Note: please check the project's package.json for any other dependency installed. These include jquery, popper and angular-font-awesome, now, let's go back to the article.

Creating The Form

I created a new component called 'sample-form', this component is to hold our form.
I replaced the content of the app.component.html file with a navbar markup and the selector for the sample-form component.

• Our form looks like this now:

Of course, It is a reactive form and I'll share the code as well.
The component:

The template:

Here's the repository branch concerned with this section for your perusal.

The Fun Part

So far, we have created the form and given it some basic styling, now we need to bring in the fontawesome icons and introduce the logic to show or hide the password.
Firstly, we have to edit our markup to accommodate the icons. Bootstrap has a very useful class called the input-group in the forms category, within the input group class, we have the 'input-group-append' and 'input-group-prepend' classes.
These classes position the icons for us just on the ends of the input, neatly as well. We use 'prepend' for our email input and 'append' for the password inputs. See the extracts of the markup below.

• The form looks like this now:

Here's the repository branch for this section for your perusal.

The Serious Fun Part, seriously :)

We are eighty percent done with our form, now we just need to add that logic to show or hide the password. We employ the ngClass directive, a one-liner from the official angular docs says 'NgClass adds and removes CSS classes on an HTML element'. Now, that's cool but there's something even way cooler, we can use NgClass with conditionals, here's a small explanation with code.

Now, because of this amazing ngClass property, we can create a condition for when we want to show our password or hide it. The most popular trick about 'show or hide password' is to convert the form input type from 'password' to 'text' and that is exactly what we do here. We do have to declare the property 'fieldTextType' in our component first.

Next, we bring in ngClass for the action part.

In the component, we have a toggleFieldType method doing the switch.

Here is the repository branch concerned with this section.

Our form finally works like this:

Conclusion

In this article, we have seen how to use the ngClass directive to create a 'show-or-hide' feature for our password input in angular forms.
The project is hosted here
Find the full code in the repo linked below, the master branch is updated.

Thank you for reading, I hope you find this useful someday.
Kindly drop your comments or feedback, I'll be grateful.

Cheers!