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);
  }