Custom otp-input template for Angular, it look likes otp-input template as mobile.

• Installation
• Usage
• Options
• Callback
• Example
• Issues
• Author

NPM

npm i -S angular7-pincode

Import Angular7PincodeModule in your module

import { Angular7PincodeModule } from 'angular7-pincode';

@NgModule({
  imports: [
    // ...
    Angular7PincodeModule
  ]
})

In your template

<angular7-pincode >
</angular7-pincode>

• [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

• (onFullFill): function return a otp string after all otp enter and return null on every backspace

<angular7-pincode (onFullFill)="onFullFill($event)">
</angular7-pincode>

onFullFill(data:any){
  console.log(data)
}

<angular7-pincode [size]="6" [class]="your-class" (onFullFill)="onFullFill($event)">
</angular7-pincode>

onFullFill(data:any){
  console.log(data)
}

<angular7-pincode [isOnlyNumeric]="true" (onFullFill)="onFullFill($event)">
</angular7-pincode>

onFullFill(data:any){
  console.log(data)
}

If you identify any errors in the library, or have an idea for an improvement, please open an issue.

• Sunil Kumar Github