Skip to content

A fully customizable, one-time password input component for the web built with Angular.

Notifications You must be signed in to change notification settings

linkstreet/ng-otp-input

 
 

Repository files navigation

ng-otp-input

Npm Version

A fully customizable, one-time password input component for the web built with Angular.

GIPHY

Stackbliz Demo

Installation

npm install --save ng-otp-input

Usage

Add NgOtpInputModule to imports app.module.ts something like

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import { AppComponent } from  './app.component';
import { NgOtpInputModule } from  'ng-otp-input';

    @NgModule({
    declarations: [AppComponent],
    imports: [ BrowserModule,
    NgOtpInputModule],
    bootstrap: [AppComponent]
    })

Add component to your page:

<ng-otp-input  (onInputChange)="onOtpChange($event)"  [config]="{length:5}"></ng-otp-input>

API

Name Type Required default Description
config object true {length:4} Various configuration options to customize the component
onOtpChange function true -- Function that will receive the otp
setValue function false -- Call setValue method of component to update component value. See example below

Config options

Name Type Required default Description
length number true 4 Number of OTP inputs to be rendered.
inputStyles object false -- Style applied to each input.Check [ngStyles](https://angular.io/api/common/NgStyle) for more info.
inputClass string false -- Class applied to each input.
containerClass string false -- Class applied to container element.
containerStyles object false -- Style applied to container element.Check [ngStyles](https://angular.io/api/common/NgStyle) for more info.
allowNumbersOnly bool false -- set true to allow only numbers as input
allowKeyCodes string[] false -- By default numbers alphabets and _ - are allowed.Y ou can define other key codes if needed.
isPasswordInput bool false -- set true for password type input
disableAutoFocus bool false -- First input will be auto focused on component load enable this flag to prevent this behaviour

Updating component value using setValue method

Component value can be updated using setValue method of the component example:-

<ng-otp-input #ngOtpInput ></ng-otp-input> //add hash to ng-otp-input component

then in your component reference using @ViewChild and call setValue method when you want to set the value of component like

@ViewChild('ngOtpInput') ngOtpInputRef:any;//Get reference using ViewChild and the specified hash
yourMethod(){
  this.ngOtpInputRef.setValue(yourValue);//yourvalue can be any string or number eg. 1234 or '1234'
}

Contributing

Add a star to show your support and feel free to open issues and pull requests!

License

MIT

About

A fully customizable, one-time password input component for the web built with Angular.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 67.5%
  • JavaScript 11.6%
  • HTML 10.5%
  • CSS 10.4%