/ng-input-password

Ionic 2 component show/hide a value of password field.

Primary LanguageTypeScriptMIT LicenseMIT

ng-input-password

Component for ionic 2 show/hide a value of password field

1 2 3

Supported platforms

  • Android
  • Browser
  • iOS
  • Windows

Instalation

Open terminal in the root of your ionic 2 project

npm install --save ng-input-password

How to use

I) Normal use

1- Import the library NgInputPasswordComponent in your src/app/app.module.ts

...
import { NgInputPasswordComponent } from 'ng-input-password/ng-input-password';
...

2- In the same file (src/app/app.module.ts) add NgInputPasswordComponent in @NgModule

...
@NgModule({
  declarations: [
    NgInputPasswordComponent,
    ...
  ]
...

II) Lazy loading

1- Go in your yourpage.module.ts and add import

...
import { NgInputPasswordComponent } from 'ng-input-password/ng-input-password';
...

2- Then add NgInputPasswordComponent in declarations

@NgModule({
  declarations: [
    ...
    NgInputPasswordComponent
  ],
  imports: [
    ...
  ],

III)- Simply use ng-input-password tag in your code

...
<ng-input-password></ng-input-password>
...

Attributes

Attribute Description Type Default
[(ngModel)] Bind data, value of the password input. any /
placeholder The HTML placeholder attribute. string Password
icon The icon of button show/hide password. string eye
color the color of icon (if password is visible). string primary
hideColor the color of icon (if password is hidden). string dark
label The text of label. string not actived
labelStyle Style of lable (floating / fixed). string /

NB: you can find icon list in ionic2 doc

Example

...
<ng-input-password 
    [(ngModel)] = "value" 
    placeholder = "password" 
    icon = "eye"
    color = "danger"
    hideColor = "secondary"
    label = "Password"
    labelStyle = "fixed" >
</ng-input-password>
...

NB: It is not necessary to use all attributes, (value is a variable in .ts file).