1.1.0 • Published 5 years ago
ng-otp v1.1.0
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:
- npm install ng-otp
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); }