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

npm install otp-angular

• Update Readme Readme file updated

• Support ReactiveFormsModule & FormsModule formControl and ngModel are supported
• Support types on Config types will be available
• Fixed Paste Event types will be available

• 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

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" /> 

• 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).

Use @ViewChild to get a reference to the component

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

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

this.otpRef.disabled.set(true);

this.otpRef.setValue('1234');

this.otpRef.reset();