ngx-show-hide-password

ngx-show-hide-password

Add a show hide button to password input fields

Add split input button to password or text input. Toggles input type between "text" and "password".

Requires

• Angular ^7
• Bootstrap ^4.1

Installation

npm install ngx-show-hide-password --save
npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons --save

yarn add ngx-show-hide-password
yarn add @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Example

// app.module.ts
import { ShowHidePasswordModule } from 'ngx-show-hide-password';
...
@NgModule({
  ...
  imports: [
    BrowserModule,
    FormsModule,
    ShowHidePasswordModule,
    ...
  ],
  ...
})

<show-hide-password size="lg" btnStyle="primary" [btnOutline]="false">
  <input type="password" name=... >
</show-hide-password>

Password hidden	Password exposed

Demo on stackblitz

Attributes

• btnOutline: boolean. default: true
• btnStyle: primary, secondary, success, warning, danger or info. default: secondary
• size: sm, lg or nothing

Changelog

• v2.0.2 fix build script and update readme
• v2.0.0 switchted to @angular/cli and ng-packagr, requires @angular/core v7, includes Font Awesome Eye/EyeSlash Icon
• v1.2.5 add 2 new attributes, btnStyle and btnOutline
• v1.2.3 bootstrap 4.0.0
• v1.2.2 update jquery ~> 3.0.0
• v1.2.1 requires Angular v5, for Angular v4 use @1.1.0 instead
• v1.2.0 update components
• v1.1.0 initial release

LICENCE

MIT © Oliver Sahner