# ngx-otp-input

**ngx-otp-input** is an Angular component for capturing one-time password (OTP) inputs. Perfect for authentication flows, verification forms, or secure user inputs.

![ngx-otp-pin-input](https://i.postimg.cc/xT8StHM6/chrome-o-TU1-Scq-AFf.gif)

## Features

- Configurable OTP length (default: 4 digits)
- Customizable input styles: size, font, border, spacing
- Supports keyboard navigation (arrow keys, backspace)
- Paste support for OTPs
- Supports Angular Reactive form binding
- Can be disabled to prevent user input

## Installation

```bash
npm install ngx-otp-input
```

## Usage

### 1. Import the Module

Add `NgxOtpInput` to your application's module imports:

```typescript
import { NgxOtpInput } from "ngx-otp-input";

@NgModule({
  declarations: [AppComponent],
  imports: [NgxOtpInput], // Add the module here
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### 2. Use in Templates

Add the OTP input component to your template:

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  config:OtpInputConfig = {
        length: 6,
        className: 'otp-input',
        style: {
            width: 50,
            height: 50,
            fontSize: 28,
            spacing: 10,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: '#ccc',
            borderFocusColor: '#6200ea'
        }
    }
}
```

```html
<ngx-otp-input (onOtpChange)="onOtpChange($event)" [config]="config"></ngx-otp-input>
```

### 3. Bind with Angular Forms

Works seamlessly with reactive forms or `ngModel`.

**Using formControl:**

```html
<form [formGroup]="otpForm">
  <ngx-otp-input formControlName="otp"></ngx-otp-input>
</form>
```

In your component class:

```typescript
this.otpForm = this.fb.group({
  otp: [""],
});
```

**Using ngModel:**

```html
<ngx-otp-input [(ngModel)]="otpValue" name="otp"></ngx-otp-input>
```

### 4. Listen for OTP Changes

Subscribe to `onOtpChange` to get OTP input updates:

```html
<ngx-otp-input (onOtpChange)="ratingChange($event)"></ngx-otp-input>
```

```typescript
onOtpChange(otp: string) {
    console.log('OTP:', otp);
}
```

### 5. Disable the Component

Disable input by setting `[disabled]` to `true`:

```html
<ngx-otp-input [disabled]="true"></ngx-otp-input>
```

## Input Properties (`OtpInputConfig`)

| Property               | Type    | Default   | Description                     |
| ---------------------- | ------- | --------- | ------------------------------- |
| length                 | number  | 4         | Number of OTP digits            |
| className              | string  |           | CSS class applied to each input |
| style.width            | number  | 40        | Width of each input box (px)    |
| style.height           | number  | 40        | Height of each input box (px)   |
| style.fontSize         | number  | 26        | Font size of input text (px)    |
| style.spacing          | number  | 12        | Gap between inputs (px)         |
| style.borderWidth      | number  | 2         | Border width of inputs (px)     |
| style.borderRadius     | number  | 4         | Border radius of inputs (px)    |
| style.borderColor      | string  | '#BDBDBD' | Default border color            |
| style.borderFocusColor | string  | '#3700B3' | Border color when focused       |
| disabled               | boolean | false     | Disables input interaction      |

## Output Events

| Event       | Type                 | Description                       |
| ----------- | -------------------- | --------------------------------- |
| onOtpChange | EventEmitter<string> | Emits the current OTP input value |

## License

This project is licensed under the MIT License. (©) [Vipin](https://github.com/vipinkc4).

Happy coding! 🚀