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