ng-input-password

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

1 | 2 | 3 :-------------------------:|:-------------------------:|:-------------------------: | |

• Supported platforms
• Instalation
• Attributes
• Example

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).