ng-otp-input v2.0.7

A fully customizable, one-time password (OTP) input component for the web built with Angular.

Demo | Edit on StackBlitz

Installation

For Angular 16 and above:

npm install --save ng-otp-input

For Angular 12 to 15:

npm install --save ng-otp-input@1.9.3

For Angular 11 and below:

npm install --save ng-otp-input@1.8.1

Major Changes in v2

• Requires Angular 16 or above.
• Emits null instead of an empty string if no value is supplied.
• Fully supports Reactive Forms (formControl and ngModel are supported from v2.0.5 onwards).
• Deprecated the custom formCtrl input property. Use formControl instead.

Usage

Import the Module

For Modules:

import { NgOtpInputModule } from 'ng-otp-input';

@NgModule({
  imports: [
    ...otherModules,
    NgOtpInputModule,
  ],
})
export class AppModule {}

For Standalone Components:

import { NgOtpInputComponent } from 'ng-otp-input';

@Component({
  standalone: true,
  imports: [NgOtpInputComponent],
})
export class YourComponent {}

Add the Component to Your Template

<!-- With Event Binding -->
<ng-otp-input (onInputChange)="onOtpChange($event)" [config]="{ length: 5 }"></ng-otp-input>

<!-- Using Reactive FormControl (v2.0.5 and above) -->
<ng-otp-input [formControl]="yourFormControl" [config]="{ length: 5 }"></ng-otp-input>

API Reference

Component Inputs/Outputs

Config Options

Advanced Features

Updating Component Value

• Use formControl or ngModel (v2.0.5 and above) for updates.
• For earlier versions, use setValue:

@ViewChild(NgOtpInputComponent, { static: false }) ngOtpInput: NgOtpInputComponent;

updateOtpValue() {
  this.ngOtpInput.setValue('12345'); // Replace with your OTP value.
}

Disabling Inputs

• Use the disabled property or set the FormControl to a disabled state (v2.0.5+).
• For earlier versions, use disable method:

this.ngOtpInput.otpForm.disable();

Focus on a Specific Input

const eleId = this.ngOtpInput.getBoxId(0);
this.ngOtpInput.focusTo(eleId);

License

Contributing

Show your support by starring the repo! Feel free to open issues or contribute via pull requests.