ng-otp-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.1 • Public • Published

    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
    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 and Next empty `setValue` excecution enable this flag to prevent this behaviour
    placeholder string false -- input placeholder

    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

    Install

    npm i ng-otp-input

    DownloadsWeekly Downloads

    9,175

    Version

    1.7.1

    License

    MIT

    Unpacked Size

    202 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar