# ng-otp

> OTP verification implementation for faster integration

Latest version **1.1.0** (published 2019-10-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng-otp
pnpm add ng-otp
yarn add ng-otp
bun add ng-otp
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-10-13 |
| First published | 2019-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 125.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Akhil M |
| Maintainers | akhilmohanan |
| Keywords | otp, angular, otp-verification, angular otp, otp-input-box, otp-input |

## Links

- npm: https://www.npmjs.com/package/ng-otp
- Repository: https://github.com/akhilmohanan/ng-otp
- Homepage: https://github.com/akhilmohanan/ng-otp#readme
- Issues: https://github.com/akhilmohanan/ng-otp/issues
- npm.io page: https://npm.io/package/ng-otp

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.1.0 (latest) — 2019-10-13
- 0.1.3 — 2019-08-07
- 0.1.2 — 2019-08-04
- 0.1.1 — 2019-08-04
- 0.1.0 — 2019-08-04
- 0.0.1 — 2019-08-04
- 0.0.2 — 2019-08-03
- 1.0.0 — 2019-08-03

## README

# Angular Otp Verification

One Time Password verification input component for Angular 7+.

[Online demo](https://akhilmohanan.github.io/ng-otp/) 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

  ```javascript
  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

```html
<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

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

---
_Source: https://npm.io/package/ng-otp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._