JSPM

  • Created
  • Published
  • Downloads 37567
  • Score
    100M100P100Q151261F
  • License MIT

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

Package Exports

  • ng-otp-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-otp-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ng-otp-input

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

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.

Contributing

Feel free to open issues and pull requests!

License

MIT