DEV Community

Cover image for How to implement 'Show Password' feature in Angular and React?
Akash Varma
Akash Varma

Posted on

3 1

How to implement 'Show Password' feature in Angular and React?

Hello Everyone πŸ‘‹, I hope you're doing great!

In Angular

In React

Explanation

We can toggle show/hide password by toggling input's type attribute.
Add an event listener to toggle button and change input's attribute value accordingly.
To show password, change input type value as password.
To show text, change input type value as text.

Bonus TipπŸš€

Generally browsers will automatically save passwords for forms. Whenever you open website, browser will automatically fill the details including password. But sometimes we forget password and depend on browsers autofill.
To view the password which is automatically filled by browser, follow below steps:

Open Browser Development Tools ➑️ Select password's input element ➑️ Change input type password to text

Alt Text

Tada!!!! You can see your password now.

Thank you for your time. Please visit my profile to know more about web technologies

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’