DEV Community

Cover image for Creating A Show-or-Hide-Password Feature For Angular Forms
Benedict Nkeonye
Benedict Nkeonye

Posted on

Creating A Show-or-Hide-Password Feature For Angular Forms

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:

Sample Form

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: Sample form with icons

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.

GitHub logo Benneee / show-hide-password

The repository for my dev.to post (https://bit.ly/2SGChq0) on show/hide password feature using features in Angular.

ShowHidePassword

This is the repository for my article on creating a show or hide password feature up on dev.to.

The article explains how we use ngClass, angular forms, bootstrap 4 and fontawesome icons to create such a helpful feature, enjoy the post! I hope you find it useful someday.




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

Cheers!

Top comments (4)

Collapse
 
vitaliel profile image
V L

Thanks, here is a separate password component based on your tutorial.

Collapse
 
unkletayo profile image
Adetayo Akinsanya

Thanks for this awesome piece, you are a life saver

Collapse
 
danieltoh16 profile image
Daniel Nicholas Figueras Toh

Thank you so much, this has been really helpful for my assignment

Collapse
 
abrahamputraprakasa profile image
Abraham Putra Prakasa • Edited

I wonder how to apply this using fa-icon [icon] not <i approach? Thank you