NgxPincode

NgxPincode is a simple angular tool provided by Anchor Solutions that can be used to collect pin code data from user(s). This tool was generated and tested with Angular 8.2.14

Installation

Install ngx-pincode via npm by running the following command:

npm install ngx-pincode --save

Usage

Register the NgxPincodeModule in your app module (or any other module you want to use it).

import { NgxPincodeModule } from 'ngx-pincode';

@NgModule({
 declarations: [],
 imports: [
   ...,
   NgxPincodeModule
 ],
 providers: [],
 bootstrap: []
})
export class AppModule {}

Use NgxPincode component selector in your component like below:

<div>
    <ngx-pincode 
        borderColor="#ffa500" 
        [hideChrs]="true" 
        type="number" 
        [size]="4" 
        (completed)="pincodeCompleted($event)">
    </ngx-pincode>
</div>

Inputs

| Property | Type | Default | Description | |-------------|---------|---------|----------------------------------------------------| | size | number | 4 | The number of characters or input box for pin code | | type | string | text | Type of characters to be used. Possible values: text, alphabet, and number | | hideChrs | boolean | false | Hides inputs (like password) if set to true | | borderColor | string | #CCCCCC | Border color of pincode input boxes |

Outputs

| Name | Type | Description | |-----------|--------|------------------------------| | completed | string | The pin code entered by user |

Further Reading

Have a look at other packages by Anchor Solutions:

• translator-client-module
• MatModal