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

Callback functions

  • (onFillAll): function return a otp string on every keypress

examples

default settings

<angular7-pincode (onFillAll)="OnFillAll($event)">
</angular7-pincode>
OnFillAll(data:any){
  console.log(data)
}

with size and custom class option

<angular7-pincode [size]="6" [class]="your-class" (onFillAll)="OnFillAll($event)">
</angular7-pincode>
 OnFillAll(data:any){
console.log(data)
}

Spread the love

Comments

Leave a comment
Please Login to comment
avatar
  Subscribe  
Notify of