Skip to content

ng-otp is an npm package for otp verification inputs for angular.

Notifications You must be signed in to change notification settings

akhilmohanan/ng-otp

Repository files navigation

Angular Otp Verification

One Time Password verification input component for Angular 7+.

Online demo is here.

Installation and usage

To install this component to an external project, follow the procedure:

  1. npm install ng-otp
  2. Add NgOtpModule import to your @NgModule like example below
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgOtpModule } from 'ng-otp';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgOtpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Add ng-otp selector to template

<ng-otp [limit]="4" [allowedCharacters]="characters" (otpOut)="setOtp($event)"></ng-otp>

Attributes

Options attribute

Option Default Type Description
limit 4 number Enter the number of inputs in the OTP screen. By default limit is set to four.
allowedCharacters /./ string or RegExp You can give a string of characters you want. It's only allows these characters in input. It also accept a Regex to be able to test single character of input. By default it accpect all characters
typeOfInput text text password number Use native HTML input properties for selected type (like hided text in case of password and so on)

Callbacks

otpOut

  • Called every time the user fill the spaces (thought to send it to server)

  • Output format is in string

    characters = 'abcdefghijklmnopqrstuvwxyz';
    setOtp(otp: string) {
    console.log('the opt is ', otp);
    }