Wondering what’s next for npm?Check out our public roadmap! »

    ngx-show-hide-password
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    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

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

    ✅ 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 hidden Password exposed
    Hidden password Exposed password

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

    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

    ℹ️ 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.

    attribute type description
    id string unique id.

    Directive: showHideTrigger

    type description
    string unique id. * required

    Directive: showHideStatus

    export interface ShowHideStatusConfig {
      id: string;
      show?: string;
      hide?: string;
      materialIcon?: boolean;
    }
    attribute type description
    id string unique id. * 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

    return Observable for input with id

    getObservable(idstring)Observable<boolean>
    • function setShow

    set Status for input with id

    setShow(idstring, showboolean)void
    • function toggleShow

    toggles Status for input with id

    toggleShow(idstring)void

    Release History

    • 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 version angular version
    @^2.3.0 v10
    @^2.2.3 v9
    @~2.1.0 v8
    @~2.0.3 v7
    @~1.2.5 v5 and v6
    @~1.1.0 v4

    LICENCE

    MIT © Oliver Sahner

    Install

    npm i ngx-show-hide-password

    DownloadsWeekly Downloads

    1,804

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar