Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-show-hide-password

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-show-hide-password

  • 2.4.0-alpha.0
  • next
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

ngx-show-hide-password

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

Build Status npm version codecov

Installation

For an up-to-date angular project (version 10):

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

:exclamation: For previous Angular releases please check the compatibility table of ngx-show-hide-password and @fortawesome/angular-fontawesome!

:white_check_mark: e.g. for angular version 8:

npm install ngx-show-hide-password@~2.1.0 --save
npm install @fortawesome/angular-fontawesome@^0.5 \
    @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 for the component
...
@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 hiddenPassword exposed
Hidden passwordExposed password

How to customize and some examples how to use the directives & service

Documentation

Component: show-hide-password

Demo on stackblitz

attributetypedescription
btnOutlinebooleandefault: true
btnStylestring'primary', 'secondary', 'success', 'warning', 'danger' or 'info'. default: 'secondary'
sizestring'sm', 'lg'. default: nothing.

Directive: showHideInput

Demo on stackblitz

:information_source: All directives (and the service) are bound to the same unique id. This can be the attribute id of the HTML input element or you can enter a synthetic ID.

attributetypedescription
idstringunique id.
Directive: showHideTrigger
typedescription
stringunique id. * required
Directive: showHideStatus
export interface ShowHideStatusConfig {
  id: string;
  show?: string;
  hide?: string;
  materialIcon?: boolean;
}
attributetypedescription
idstringunique id. * required
showstringoptional class/material icon identifier. default: 'visibility'
hidestringoptional class/material icon identifier. default: 'visibility_off'
materialIconbooleanif true updates innerHTML instead of class attribute. default: false

Service: ShowHideService

  • function getObservable

return Observable for input with id

getObservable(id: string): Observable<boolean>
  • function setShow

set Status for input with id

setShow(id: string, show: boolean): void
  • function toggleShow

toggles Status for input with id

toggleShow(id: string): void

Release History

  • 2.3.2
    • update @angular/cli and @angular/core to v13, @fortawesome/angular-fontawesome v1
  • 2.3.0
    • update @angular/cli and @angular/core to v10, @fortawesome/angular-fontawesome v0.7, @fortawesome/free-solid-svg-icons v5.14
  • 2.2.4
    • ShowHideInputDirective no longer needs an Input Attribute ID. ID is now an Input(). Thanks to @aboodz
  • 2.2.2
    • update @angular/cli and @angular/core to v9
  • 2.1.0
    • dependencies updated
  • 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

compatibility chart

local versionangular version
@^2.3.1v11
@^2.3.0v10
@^2.2.3v9
@~2.1.0v8
@~2.0.3v7
@~1.2.5v5 and v6
@~1.1.0v4

LICENCE

MIT © Oliver Sahner

Keywords

FAQs

Package last updated on 18 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc