danzrou/ngx-show-hide-password

Angular - Form Input: Add split input button to password or text input. Toggles input type between "text" and "password".

ngx-show-hide-password

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

Installation

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

Integration

// app.module.ts
import { ShowHidePasswordModule } from 'ngx-show-hide-password';
// no need to import @fortawesome/angular-fontawesome
...
@NgModule({
  ...
  imports: [
    BrowserModule,
    ShowHidePasswordModule,
    ...
  ],
  ...
})

as component ...

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

or with directives ...

<mat-form-field>
  <input id="mysecretpassword" type="password" placeholder="Password" matInput showHideInput>
  <i matSuffix
    class="material-icons"
    showHideTrigger="mysecretpassword"
    [showHideStatus]="{ materialIcon: true, id: 'mysecretpassword' }"
  ></i>
</mat-form-field>

Password hidden	Password exposed

Documentation

Component: show-hide-password

Demo on stackblitz

attribute	type	description
btnOutline	boolean	default: true
btnStyle	string	'primary', 'secondary', 'success', 'warning', 'danger' or 'info'. default: 'secondary'
size	string	'sm', 'lg'. default: nothing.

Directive: showHideInput

Demo on stackblitz

The element must have a valid id attribute.

Directive: showHideTrigger

type	description
string	id of the input element. * required

Directive: showHideStatus

export interface ShowHideStatusConfig {
  id: string;
  show?: string;
  hide?: string;
  materialIcon?: boolean;
}

attribute	type	description
id	string	id of the input element. * required
show	string	optional class/material icon identifier. default: 'visibility'
hide	string	optional class/material icon identifier. default: 'visibility_off'
materialIcon	boolean	if true updates innerHTML instead of class attribute. default: false

Service: ShowHideService

• function getObservable

returns Observable for id

getObservable(id: string): Observable<boolean>

• function setShow

inits Status for id

setShow(id: string, show: boolean): void

• function toggleShow

toggles Status for id

toggleShow(id: string): void

Release History

• 2.0.5
  • update @angular/cli and @angular/core to v8
• 2.0.3
  • add directives: showHideInput, showHideTrigger and showHideStatus
• 2.0.0
  • switched to @angular/cli and ng-packagr,
  • requires @angular/core v7 and @fortawesome/angular-fontawesome, uses Font Awesome Eye/EyeSlash Icon
• 1.2.5
  • add new attributes: btnStyle and btnOutline
  • bootstrap 4.0.0
• 1.2.1
  • requires Angular v5, for Angular v4 use @1.1.0 instead
• 1.1.0
  • initial release

LICENCE

MIT © Oliver Sahner