Angular otp input field component for web applications. Easy to integrate and use.
npm install angular-otp-boxAngular otp input field component for web applications. Easy to integrate and use.
``bash`
npm i angular-otp-box
Add AngularOtpLibModule in app.module.tspython
import { AngularOtpLibModule } from 'angular-otp-box';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [NgOtpInputModule],
bootstrap: [AppComponent]
})
`
In component add following:`bash``
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| setting | object | { length:4, timer: 0 } | true | configurations to configure the component |
| onValueChange | function | -- | true | Emitter that will emit otp, -1 when the timer reaches 0 count and -2 when resend button is clicked |
setting options
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| length | number | 4 | true | Number of OTP inputs |
| numbersOnly | boolean | -- | false | set true to allow only numbers as input |
| inputClass | string | -- | false | Class applied to each input. |
| wrapperClass | string | -- | false | Class applied to wrapper element. |
| inputStyles | object | -- | false | Style applied to each input.Check ngStyles for more info. |
| wrapperStyles | object | -- | false | Style applied to wrapper element.Check ngStyles for more info. |
| allowKeyCodes | string[] | -- | false | By default numbers alphabets and _ - are allowed.Y ou can define other key codes if needed. |
| timer | number | 0 | false | Countdown for otp |
| btnClass | string | -- | false | Class applied to resend otp button |