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
152 lines (102 loc) • 7.67 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.1.0
- **Update Auto Submit** Improved autoSubmit functionality
- **Bug Fix** Fixed form control value update issue on Backspace delete
## Usage
For Component
```bash
import { OtpAngular, OtpAngularType } from 'otp-angular';
@Component({
imports: [...others, OtpAngular, OtpAngularType]
})
export class <ComponentName> {
protected config = signal<OtpAngularType>({ length: 4 });
}
```
For Template
```bash
@let _config = config();
<!-- With Event Binding -->
<otp-angular [config]="_config" (onInputChange)="onInputChange($event)" (onResendAvailable)="resend($event)" />
<!-- Using Reactive FormControl -->
<otp-angular [config]="_config" formControlName="otp" />
<!-- Using Forms Module -->
<otp-angular [config]="_config" [(ngModel)]="otp" />
```
---
## ⚙️ Inputs/Outputs
| Option | Type | Required | Description | Default |
|---------------------|------------|----------|----------------------------------------------------------------------------------|----------------|
| `disabled` | `boolean` | No | Disables the OTP input when set to `true` | `false` |
| `onInputChange` | `Output` | No | Emits the OTP value on change. Returns `string`, `number`, or `null` | — |
| `onAutoSubmit` | `Output` | No | Emits the OTP value when all input fields are filled and `autoSubmit` is enabled | — |
| `onResendAvailable` | `Output` | No | Emits `true` when the resend option is clicked | — |
| `setValue` | `function` | No | Programmatically sets the OTP value | — |
| `reset` | `function` | No | Resets the resend timer | — |
| `config` | `object` | Yes | Configuration object for the OTP component (see **Config Options** below) | `{ length: 4 }`|
---
## ⚙️ Config Options
| Option | Type | Required | Description | Default |
|--------------------------|--------------------------|----------|-------------------------------------------------------------------------|---------------------------------|
| `length` | `number` | Yes | Number of OTP digits | `4` |
| `numbersOnly` | `boolean` | No | Allows only numeric input | `false` |
| `autoFocus` | `boolean` | No | Automatically focuses the first input | `false` |
| `autoSubmit` | `boolean` | No | Automatically emits the OTP value when all inputs are filled | `false` |
| `isPassword` | `boolean` | No | Masks input characters | `false` |
| `showError` | `boolean` | No | Shows a red border on empty inputs when blurred | `false` |
| `showCaps` | `boolean` | No | Transforms input characters to uppercase | `false` |
| `containerClass` | `string \| string[]` | No | Custom CSS class(es) for the container | — |
| `containerStyles` | `object` | No | Inline styles for the container | `{}` |
| `inputClass` | `string \| string[]` | No | Custom CSS class(es) for OTP input fields | — |
| `inputStyles` | `object \| object[]` | No | Inline styles for OTP input fields | `{}` |
| `placeholder` | `string` | No | Placeholder text for each input field | `''` |
| `separator` | `string` | No | Optional separator character between inputs | `''` |
| `resend` | `number` | No | Enables the resend option with countdown (in seconds) | `0` |
| `resendLabel` | `string` | No | Text label for the resend option | `RESEND VERIFICATION CODE` |
| `resendContainerClass` | `string` | No | Custom CSS class for the resend container | `''` |
| `resendLabelClass` | `string` | No | Custom CSS class for the resend label | `''` |
| `resendTimerClass` | `string` | No | Custom CSS class for the resend timer | `''` |
| `theme` | `'light' \| 'dark'` | No | Theme color mode | `'light'` |
---
## 🧩 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();
```
---
📛 Badges
---
## 📄 License
[](LICENSE)