README
ngx-show-hide-password
Add split input button to password or text input. Toggles input type between "text" and "password".
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 hidden | Password exposed |
---|---|
How to customize and some examples how to use the directives & service
- example on stackblitz.
- some more basic examples here.
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
: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.
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(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.1
- update @angular/cli and @angular/core to v11, @fortawesome/angular-fontawesome v0.8
- 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
- ShowHideInputDirective no longer needs an Input Attribute ID. ID is now an
- 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
andbtnOutline
- bootstrap 4.0.0
- add new attributes:
- 1.2.1
- requires Angular v5, for Angular v4 use
@1.1.0
instead
- requires Angular v5, for Angular v4 use
- 1.1.0
- initial release
compatibility chart
local version | angular version |
---|---|
@^2.3.1 |
v11 |
@^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