NgxPasswordy

Overview

An angular +9 module that provides an input of type password with an eye icon to show/hide the visibility of the password.

It is fully compatible with reactive forms.

Demo

Getting started

npm install ngx-passwordy

Import the 'NgxPasswordy' module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxPasswordyModule } from 'ngx-passwordy';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgxPasswordyModule // <-- NgxPasswordy Module 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to use with reactive forms?

Component

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.loginForm = this.formBuilder.group({
      username: ['', [Validators.required]],
      password: ['', [Validators.required]],
    });
  }

  login(event: Event): void {
    alert(
      `You have logged in: \nUser: ${
        this.loginForm.get('username').value
      }\nPassword: ${this.loginForm.get('password').value}`
    );
  }
}

Template

<div class="app-component">
  <form [formGroup]="loginForm" (ngSubmit)="login($event)">
    <fieldset>
      <legend>Login Form</legend>
      <div class="form-section">
        <label id="user" for="username">User</label>
        <input
          type="text"
          id="username"
          formControlName="username"
          placeholder="User"
        />
      </div>
      <div class="form-section">
        <label id="user" for="password">Password</label>
        <ngx-passwordy
          formControlName="password"
          placeholder="Password"
          inputId="password"
        ></ngx-passwordy>
      </div>
      <div>
        <button type="submit">Login</button>
      </div>
    </fieldset>
  </form>
</div>

Styles

.app-component {
  margin: 20px;
}

.form-section {
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;

  label {
    margin-right: 10px;
  }
}

Notes

Make sure to include "node_modules/material-design-icons/iconfont/material-icons.css" in your angular json so that the eye icon is loaded properly.

Properties

Name	Description	Default Value
maxLength	The maximum number of characters allowed in the input	50
placeholder	The placeholder for the input	'Password'
inputId	The id to use for the input	'password'

License

MIT