angular-otp-box

Angular Otp input Library

Angular otp input field component for web applications. Easy to integrate and use.

Demo

Live 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

License

MIT