angular7-pincode
v2.0.0
Published
a simple directive for otp input template like on mobile otp input template
Downloads
64
Maintainers
Readme
Custom otp-input template for Angular, it look likes otp-input template as mobile.
Table of Contents
Installation
NPM
npm i -S angular7-pincode
Usage
Import Angular7PincodeModule
in your module
import { Angular7PincodeModule } from 'angular7-pincode';
@NgModule({
imports: [
// ...
Angular7PincodeModule
]
})
In your template
<angular7-pincode >
</angular7-pincode>
Options
directive inputs
[size]: number length of otp input, default
4
[class]: string your custom class on otp input
[isOnlyNumeric]: boolean take only as numeric value if true, default
false
Callback functions
- (onFullFill): function return a otp string after all otp enter and return null on every backspace
examples
default settings
<angular7-pincode (onFullFill)="onFullFill($event)">
</angular7-pincode>
onFullFill(data:any){
console.log(data)
}
with size and custom class option
<angular7-pincode [size]="6" [class]="your-class" (onFullFill)="onFullFill($event)">
</angular7-pincode>
onFullFill(data:any){
console.log(data)
}
with option isOnlyNumeric
<angular7-pincode [isOnlyNumeric]="true" (onFullFill)="onFullFill($event)">
</angular7-pincode>
onFullFill(data:any){
console.log(data)
}
Issues
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
Author
- Sunil Kumar Github