nitro-otp v1.1.0-ng17

@nitro/otp (OTP / PIN Input)

One Time Password (OTP) Input Angular Library Component for the web built with Angular 17.1.3 and tested from all versions >= 10.0.0.

This can be used as OTP inputs or Personal Identification Number (PIN) inputs or for all each character specific inputs.

If you are facing any issues with lower versions of angular, Please use the previous versions.

Features:

1. Light weight
2. Fully customizable
3. CSS vars for theming
4. In-Built Boxed & Dashed appearance

Usage

app.module.ts

import { OtpModule } from 'nitro-otp';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OtpModule
  ]
})

some.component.ts

import { OtpComponent } from 'nitro-otp';

some.component.html

<nitro-otp #otp [size]="4" message="Incorrect OTP" [autoFocus]="true" (otpChange)="afterOtpChanged($event)"></nitro-otp>

Error Management Example:

some.component.ts

// Below code are OPTIONAL for error display
export class SomeComponent {
  @ViewChild('otp')
  private otp!: OtpComponent;

  afterOtpChanged(otpVal: [string, boolean]): void {
    const [value, length] = otpVal;
    // value: Value of OTP Input
    // length: TRUE, if length matches and vice-versa
    
    // Write your validation code here `this.otp.isError.next(true);` will set Error
    this.otp.isError.next(!length);
  }
}

API:

CSS Variables:

:root {
  --nitro-otp_border-color: goldenrod;
  --nitro-otp_border-color_focus: blue;
  --nitro-otp_border-color_error: red;
}

This library was generated with Angular CLI version 17.1.3.