otp-angular
Version:
**Otp Angular** is a lightweight, highly customizable, and dependency-free OTP (One-Time Password) input component built for Angular 20+ applications. It offers seamless integration, flexible configuration, and a polished user experience for OTP or verifi
138 lines (99 loc) • 6.06 kB
Markdown
# 🔐 OTP Angular
**Otp Angular** is a lightweight, highly customizable, and dependency-free OTP (One-Time Password) input component built for Angular 20+ applications. It offers seamless integration, flexible configuration, and a polished user experience for OTP or verification inputs. The component now also includes a built-in **resend option**, making it easy to handle OTP resubmission flows directly within the UI.
> ✅ Supports Angular 20+
> 🔧 Fully customizable
> 🎯 Keyboard navigation support
> 🧪 Easily testable & maintainable
> 💡 Auto-focus, password-style, number-only, and more
---
[Demo](https://stackblitz.com/edit/stackblitz-starters-osu6xqrf?file=package.json)
---
## 📦 Installation
```bash
npm install otp-angular
```
---
## 🚀 latest Changes in 1.0.1
- **Emits `null` instead of an empty string** if no value is supplied
- **Resend Option added** if you add resend as option then it will open
---
## Usage
For Component
```bash
import { OtpAngular } from 'otp-angular';
@Component({
imports: [...others, OtpAngular]
})
```
For Template
```bash
<!-- With Event Binding -->
<otp-angular [config]="{length: 4}" (onInputChange)="onInputChange($event)" (onResendAvailable)="resend($event)" />
```
---
## ⚙️ Inputs/Outputs
| Option | Type |required | Description | Default|
|-------------------|---------------------------|-------------|-------------------------------|---------|
| `disabled` | `boolean` | No | Disables otp when set to true | `false` |
| `onInputChange` | `Output` | No | Emits the OTP value on change, it's return `string`, `number` or `null` | — |
| `onResendAvailable`| `Output` | No | Emits when you click resend option, as a boolean(true) | — |
| `setValue` | `function` | No | Set the otp value | — |
| `reset` | `function` | No | Reset the Resend | — |
| `config` | `object` | Yes | Configure based on option. (see Config Options below) | `{ length: 4 }` |
## ⚙️ Config Options
| Option | Type |required | Description | Default|
|-------------------|---------------------------|-------------|-------------------------------|---------|
| `length` | `number` | Yes | Number of OTP digits | 4 |
| `numbersOnly` | `boolean` | No | Allow only numeric input | `false` |
| `autoFocus` | `boolean` | No | Auto-focus first input | `false` |
| `isPassword` | `boolean` | No | Mask input characters | `false` |
| `showError` | `boolean` | No | Show red border on error | `false` |
| `showCaps` | `boolean` | No | Transform to Capital letters | `false` |
| `containerClass` | `string` or `string[]` | No | Custom CSS class for container| — |
| `containerStyles` | `object` | No | Inline styles for container | `{}` |
| `inputClass` | `string` or `string[]` | No | Custom class for input boxes | — |
| `inputStyles` | `object` or `object[]` | No | Inline styles for input fields| `{}` |
| `placeholder` | `string` | No | Placeholder for each input box| `''` |
| `separator` | `string` | No | Optional separator character | `''` |
| `resend` | `number` | No | Enable the Resend option | `0` |
| `resendLabel` | `string` | No | Label for Resend | `RESEND VERIFICATION CODE` |
| `resendContainerClass` | `string` | No | Custom class for resend container | `''` |
| `resendLabelClass` | `string` | No | Optional class for resend Label | `''` |
| `resendTimerClass` | `string` | No | Optional class for resend timer | `''` |
---
### 📘 Option Descriptions
- **`length`**: Sets how many input boxes are shown (e.g., 6 for a 6-digit OTP).
- **`numbersOnly`**: If true, only numeric input is allowed in each box.
- **`autoFocus`**: Automatically focuses the first input box on load.
- **`isPassword`**: Hides characters behind dots, like a password field.
- **`showError`**: Enables error styling (e.g., red border).
- **`showCaps`**: Transform to Capital letters .
- **`containerClass` / `inputClass` / `resendContainerClass` / `resendLabelClass` / `resendTimerClass` **: Lets you add your own CSS classes for styling.
- **`containerStyles` / `inputStyles`**: Set inline styles directly from your component.
- **`placeholder`**: The character shown in empty input boxes (like `*` or `_`).
- **`separator`**: Visual separator between input boxes (like `-` or `:`).
- **`resend`**: Sets the value to show the Resend option, value will be in seconds (like `60`).
- **`resendLabel`**: To change the label for resend (e.g., `Resend Code`).
---
## 🧩 Other Features
Use @ViewChild to get a reference to the component
```bash
@ViewChild(OtpAngular, { static: false }) otpRef!: OtpAngular;
```
### 🔒 Disabling Inputs
You can disable all input fields using the `disabled` input or programmatically:
```bash
this.otpRef.disabled.set(true);
```
### 🔁 Updating OTP Value
```bash
this.otpRef.setValue('1234');
```
### 🔁 Reset the timer of resend
```bash
this.otpRef.reset();
```
---
## 📄 License
[](LICENSE)