Angular: Build A Custom Password Field

Hide Password With dots

Saying you need a password field but you must not save password, and you also want to avoid all browser default behaviour regarding password field. e.g. Agent application.

What if you can hide user input with dots?

There are ways to do it, but each one has it’s own downside

• Use -webkit-text-security property, but only works with Chrome Browser
• Make your own like this, but too much coding and maintenance.
• Use custom font which hiding input, but build a font?

Answer to this question is to use a pre-built custom font, which is called text-surity.

Here are the steps how to use this node module.

1. Install
2. Update styles.css
3. Use it

1. Install

$ npm install security-text --save
$ cp -R node_modules/text-security src/assets/ # if not using .scss

2. Update styles.css

@import "~text-security/text-security.css";

This will install following fonts

• text-security-disc
• text-security-circle
• text-seciuryt-square

3. Use it

<input style="font-family: text-security-disc;" />
<input style="font-family: text-security-circle;" />
<input style="font-family: text-security-square;" />

Happy Coding :)

This article is a part of Angular Random How-Tos. You may find some useful articles for your daily development.

Do you think this useful? If so please;
* Clap 👏 button below️ to let others to see this too.
* Follow Allen on Twitter (@allenhwkim)