Angular Otp input Library
Angular otp input field component for web applications. Easy to integrate and use.
Demo
Installation
npm i angular-otp-box
Usage
Add 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>
API
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](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 |