🔐 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

📦 Installation

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

import { OtpAngular, OtpAngularType } from 'otp-angular';

@Component({
  imports: [...others, OtpAngular, OtpAngularType]
})

export class <ComponentName> {
  protected config = signal<OtpAngularType>({ length: 4 });
}

For Template

@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

@ViewChild(OtpAngular, { static: false }) otpRef!: OtpAngular;

🔒 Disabling Inputs

You can disable all input fields using the disabled input or programmatically:

this.otpRef.disabled.set(true);

🔁 Updating OTP Value

this.otpRef.setValue('1234');

🔁 Reset the timer of resend

this.otpRef.reset();

📛 Badges

📄 License