Creating A Show-or-Hide-Password Feature For Angular Forms
Tags: angularforms, dev, passwords, angular
Published: 2020-02-15 03:22:56

---
title: Creating A Show-or-Hide-Password Feature For Angular Forms
published: true
description: Show or Hide Password feature in Angular forms using the NgClass directive, Bootstrap, Fontawesome and of course, angular forms
tags: #angularforms #dev #passwords #angular
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qnv6p5jb67mki93jwm2h.png
---

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.

<pre>
                           ng new show-hide-password
</pre>

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](https://github.com/Benneee/show-hide-password/tree/installations) 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.

<pre>
                            npm i bootstrap font-awesome
</pre>

* Note: please check the project's [package.json](https://github.com/Benneee/show-hide-password/blob/master/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.

{% gist https://gist.github.com/Benneee/323aef357a9ad72d51462869b1074bda %}

* Our form looks like this now:

![Sample Form](https://dev-to-uploads.s3.amazonaws.com/i/v9jl0ehcoh19mrej4sdb.png)

Of course, It is a reactive form and I'll share the code as well.
The component:
{% gist https://gist.github.com/Benneee/c7c81de748433390568c7a33e01a394d %}

The template:
{% gist https://gist.github.com/Benneee/5d405dca05ab534b0aeb9288a47c5a50 %}

Here's the [repository branch](https://github.com/Benneee/show-hide-password/tree/ft-create-form) 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](https://getbootstrap.com/docs/4.1/components/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.

{% gist https://gist.github.com/Benneee/2bf958d35b4ee4c74cff7748b351ba87 %}

* The form looks like this now:
![Sample form with icons](https://dev-to-uploads.s3.amazonaws.com/i/bc0baye0vrwgvldbj5ew.png)

Here's the [repository branch](https://github.com/Benneee/show-hide-password/tree/ft-add-icons) 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](https://angular.io/api/common/NgClass) 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.
{% gist https://gist.github.com/Benneee/f6c1913ed2bae4ffe783e1a969824269 %}

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.

{% gist https://gist.github.com/Benneee/9c7e9f3dc87a72fc6135a1a76dd49e42 %}

Next, we bring in ngClass for the action part.

{% gist https://gist.github.com/Benneee/65c4bbfedb49cd26527a2fc37a73e8a1 %}

In the component, we have a toggleFieldType method doing the switch.
{% gist https://gist.github.com/Benneee/6d8772c73f543dd7863ff546f8af2028 %}

Here is the [repository branch](https://github.com/Benneee/show-hide-password/tree/ft-logic) concerned with this section.

Our form finally works like this:
{% youtube 22deGrKOXSM %}

#### 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](https://show-hide-password.now.sh)
Find the full code in the repo linked below, the master branch is updated.

{% github Benneee/show-hide-password %}

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

Cheers!