Angular otp input field component for web applications. Easy to integrate and use.
npm i angular-otp-boxAdd AngularOtpLibModule in app.module.ts
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:
<otp [setting]="settings" (onValueChange)="onInputChange($event)"></otp>| 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 |
| timerType | number | 0: secs | false | Type of the timer 0: seconds, 1: minutes |
| 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](https://angular.io/api/common/NgStyle) for more info. |
| wrapperStyles | object | -- | false | Style applied to wrapper element.Check [ngStyles](https://angular.io/api/common/NgStyle) 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 |