ngx-otp-pin/README.md

A reusable, standalone Angular OTP input component supporting multiple character types, automatic focus movement, and style customization from the parent.

# NgxOtpPin

A reusable, standalone Angular OTP input component supporting multiple character types, automatic focus movement, and style customization from the parent.

## ✨ Features

- ✅ OTP/PIN input fields (configurable)
- ✅ Supports multiple character types (`digits`, `letters`, `alphanumeric`, etc.)
- ✅ Auto navigation between input fields
- ✅ Allows class inheritance from parent via `@HostBinding`
- ✅ Can be used multiple times on the same page without conflict

---

## 📦 Installation

This component is `standalone`. You can import it directly into your Angular project and use it where needed.

```npm i ngx-otp-pin```

---

## 🚀 Usage

## 1. **Import into a parent component**

```ts
import { NgxOtp } from 'ngx-otp-pin';

<ngx-otp 
   [size]="5" 
   [isPassword]="true" 
   (opt)="otp=$event" 
   [inputClass]="'abc'" 
/>
```

## 📥 Inputs & 📤 Output

## 🧩 Inputs
`size (number):`
Specifies how many OTP input boxes should be rendered.

Example: size="6" renders 6 input boxes.

Default: 4


`type (OTP_TYPE):`
Defines the allowed character type in each input box.

You can choose from the following options (see the OTP_TYPE enum section below).

`isPassword (boolean):`
If set to true, masks each input like a password field using type="password".
Useful for secure PIN or sensitive OTP input.

Default: false

`containerStyles ({ [key: string]: string }):`
Inline styles to apply to the outer container (\<div>) holding the OTP inputs.

Example: { display: 'flex', gap: '10px' }

`inputStyles ({ [key: string]: string }):`
Inline styles to apply to each individual input box.

Example: { width: '40px', textAlign: 'center' }

`containerClass (string):`

Optional class name to apply to the container for styling via CSS.

`inputClass (string):`

Optional class name to apply to each input field for styling via CSS.

## 📤 Output
`opt (string):`
Emits the entire OTP value as a concatenated string whenever the user types or deletes a character.

Example: Typing 1, 2, 3, 4 will emit "1234".

Usage in parent component:
```
<ngx-otp (opt)="onOtpChange($event)"></ngx-otp>
```
```
onOtpChange(otp: string) {
  console.log('Received OTP:', otp);
}
```

## 🧠 OTP_TYPE Enum
Use this enum in your component to control what type of characters are allowed in each OTP input field:

```
export enum OTP_TYPE {
  DIGITS = 'DIGITS',                   // Only numbers: 0–9
  CAPITAL_LETTERS = 'CAPITAL_LETTERS', // Only A–Z
  SMALL_LETTERS = 'SMALL_LETTERS',     // Only a–z
  LETTERS = 'LETTERS',                 // a–z and A–Z
  ALPHA_NUMERIC = 'ALPHA_NUMERIC'      // a–z, A–Z, and 0–9
}
```

How to use it in your component:
```
OTP_TYPE = OTP_TYPE;
<ngx-otp [type]="OTP_TYPE.ALPHA_NUMERIC"></ngx-otp>
```