Fully Customizable One Time Password OTP Component | ng-otp-input

ng-otp-input is a fully customizable, one-time password input component for the web built with Angular.

How to make use of it:

Installation:

# NPM
$ npm install ng-otp-input --save

Add NgOtpInputModule to import 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 a component to your page:

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

API

NameTypeRequireddefaultDescription
configobjecttrue{length:4}Various configuration options to customize the component
onOtpChangefunctiontrueA function that will receive the OTP
setValuefunctionfalseCall setValue method of the component to update the component value. See example below

Config options

NameTypeRequireddefaultDescription
lengthnumbertrue4A number of OTP inputs are to be rendered.
inputStylesobjectfalseStyle applied to each input. Check https://angular.io/api/common/NgStyle for more info.
inputClassstringfalseClass is applied to each input.
containerClassstringfalseClass applied to the container element.
containerStylesobjectfalseStyle applied to the container element. Check https://angular.io/api/common/NgStyle for more info.
allowNumbersOnlyboolfalseset true to allow only numbers as input
allowKeyCodesstring[]falseBy default numbers, alphabets, and _ – are allowed. You can define other key codes if needed.
isPasswordInputboolfalseset true for password type input
disableAutoFocusboolfalseThe first input will be auto-focused on component load and to next empty input on setValue execution. Set this flag to true to prevent this behavior
placeholderstringfalseinput placeholder
letterCasestringSet value to Upper or Lower to change the OTP to upper case or lower case

Customizable Password Input Component, ng-otp-input Plugin/Github, how to send otp email using javascript


See Demo And Download

Official Website(code-farmz): Click Here

This superior jQuery/javascript plugin is developed by code-farmz. For extra Advanced Usage, please go to the official website.

Share