{"id":28683727,"url":"https://github.com/code-farmz/ng-otp-input","last_synced_at":"2025-06-14T03:03:55.539Z","repository":{"id":34885489,"uuid":"187021798","full_name":"code-farmz/ng-otp-input","owner":"code-farmz","description":"A fully customizable, one-time password input component for the web built with Angular.","archived":false,"fork":false,"pushed_at":"2025-05-21T08:36:22.000Z","size":2072,"stargazers_count":115,"open_issues_count":1,"forks_count":55,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-01T16:14:06.882Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-farmz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-16T12:17:45.000Z","updated_at":"2025-05-22T03:26:58.000Z","dependencies_parsed_at":"2022-08-08T13:00:29.375Z","dependency_job_id":"1222e4d3-1642-41ca-9ce9-c496b4091edc","html_url":"https://github.com/code-farmz/ng-otp-input","commit_stats":{"total_commits":65,"total_committers":9,"mean_commits":7.222222222222222,"dds":0.6615384615384615,"last_synced_commit":"72adeff9f234241c64023d4b2ee652ff638f708d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/code-farmz/ng-otp-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-farmz%2Fng-otp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-farmz%2Fng-otp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-farmz%2Fng-otp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-farmz%2Fng-otp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-farmz","download_url":"https://codeload.github.com/code-farmz/ng-otp-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-farmz%2Fng-otp-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259426925,"owners_count":22855550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-14T03:01:12.785Z","updated_at":"2025-06-14T03:03:55.529Z","avatar_url":"https://github.com/code-farmz.png","language":"TypeScript","readme":"\n[![npm version](https://badge.fury.io/js/ng-otp-input.svg)](https://badge.fury.io/js/ng-otp-input) [![npm](https://img.shields.io/npm/dw/ng-otp-input.svg?logo=npm)](https://www.npmjs.com/package/ng-otp-input) [![npm](https://img.shields.io/bundlephobia/minzip/ng-otp-input)](https://www.npmjs.com/package/ng-otp-input)\n\nA fully customizable, one-time password (OTP) input component for the web built with Angular.\n\n![GIPHY](https://media.giphy.com/media/TdpKuX7H1KBvvR2Hpu/giphy.gif)\n\n[**Demo**](https://code-farmz.github.io/ng-otp-input) | [**Edit on StackBlitz**](https://stackblitz.com/github/code-farmz/ng-otp-input)\n\n---\n\n## Installation\n\n#### For Angular 16 and above:\n\n```bash\nnpm install --save ng-otp-input\n```\n\n#### For Angular 12 to 15:\n\n```bash\nnpm install --save ng-otp-input@1.9.3\n```\n\n#### For Angular 11 and below:\n\n```bash\nnpm install --save ng-otp-input@1.8.1\n```\n\n---\n\n## Major Changes in v2\n\n- Requires Angular 16 or above.\n- Emits `null` instead of an empty string if no value is supplied.\n- Fully supports **Reactive Forms** (`formControl` and `ngModel` are supported from v2.0.5 onwards).\n- Deprecated the custom `formCtrl` input property. Use `formControl` instead.\n\n---\n\n## Usage\n\n### Import the Module\n\nFor **Modules**:\n\n```typescript\nimport { NgOtpInputModule } from 'ng-otp-input';\n\n@NgModule({\n  imports: [\n    ...otherModules,\n    NgOtpInputModule,\n  ],\n})\nexport class AppModule {}\n```\n\nFor **Standalone Components**:\n\n```typescript\nimport { NgOtpInputComponent } from 'ng-otp-input';\n\n@Component({\n  standalone: true,\n  imports: [NgOtpInputComponent],\n})\nexport class YourComponent {}\n```\n\n### Add the Component to Your Template\n\n```html\n\u003c!-- With Event Binding --\u003e\n\u003cng-otp-input (onInputChange)=\"onOtpChange($event)\" [config]=\"{ length: 5 }\"\u003e\u003c/ng-otp-input\u003e\n\n\u003c!-- Using Reactive FormControl (v2.0.5 and above) --\u003e\n\u003cng-otp-input [formControl]=\"yourFormControl\" [config]=\"{ length: 5 }\"\u003e\u003c/ng-otp-input\u003e\n```\n\n---\n\n## API Reference\n\n### Component Inputs/Outputs\n\n| Name            | Type     | Required | Default | Description                                                                 |\n|-----------------|----------|----------|---------|-----------------------------------------------------------------------------|\n| `disabled`      | boolean  | No       | `false` | Disables all inputs when set to `true`.                                    |\n| `onOtpChange`   | `Output` | No       | --      | Emits the OTP value on change. Not required if using `formControl`.        |\n| `onBlur`        | `Output` | No       | --      | Triggered when focus is lost from the component.                           |\n| `setValue`      | function | No       | --      | Allows programmatic setting of the component value.                        |\n| `config`        | object   | Yes      | `{ length: 4 }` | Configuration object for customization (see **Config Options** below). |\n\n---\n\n### Config Options\n\n| Name              | Type    | Required | Default    | Description                                                                                  |\n|-------------------|---------|----------|------------|----------------------------------------------------------------------------------------------|\n| `allowNumbersOnly` | boolean | No       | `false`    | Restricts input to numeric values only.                                                      |\n| `disableAutoFocus` | boolean | No       | `false`    | Prevents automatic focus on load or when setting the value.                                  |\n| `containerClass`   | string  | No       | --         | Adds a custom CSS class to the container element.                                            |\n| `containerStyles`  | object  | No       | --         | Customizes the container styles. Check [NgStyle](https://angular.io/api/common/NgStyle).      |\n| `inputStyles`      | object  | No       | --         | Customizes the styles of individual inputs.                                                  |\n| `inputClass`       | string  | No       | --         | Adds a custom CSS class to each input box.                                                   |\n| `isPasswordInput`  | boolean | No       | `false`    | Masks input as password fields.                                                             |\n| `length`           | number  | Yes      | `4`        | Sets the number of OTP inputs to render.                                                    |\n| `letterCase`       | string  | No       | --         | Converts input to `Upper` or `Lower` case.                                                  |\n| `placeholder`      | string  | No       | --         | Sets a placeholder for each input box.                                                      |\n| `separator`        | char    | No       | --         | Inserts a separator character between input boxes.                                          |\n| `showError`        | boolean | No       | `false`    | Highlights inputs with red borders if `formControl` is invalid, dirty, or touched.          |\n\n---\n\n## Advanced Features\n\n### Updating Component Value\n\n- Use `formControl` or `ngModel` (v2.0.5 and above) for updates.\n- For earlier versions, use `setValue`:\n\n```typescript\n@ViewChild(NgOtpInputComponent, { static: false }) ngOtpInput: NgOtpInputComponent;\n\nupdateOtpValue() {\n  this.ngOtpInput.setValue('12345'); // Replace with your OTP value.\n}\n```\n\n---\n\n### Disabling Inputs\n\n- Use the `disabled` property or set the `FormControl` to a disabled state (v2.0.5+).\n- For earlier versions, use `disable` method:\n\n```typescript\nthis.ngOtpInput.otpForm.disable();\n```\n\n---\n\n### Focus on a Specific Input\n\n```typescript\nconst eleId = this.ngOtpInput.getBoxId(0);\nthis.ngOtpInput.focusTo(eleId);\n```\n\n---\n\n## License\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/code-farmz/ng-otp-input/blob/master/LICENSE)\n\n---\n\n## Contributing\n\nShow your support by starring the repo! Feel free to open [issues](https://github.com/code-farmz/ng-otp-input/issues/new) or contribute via [pull requests](https://github.com/code-farmz/ng-otp-input/compare).\n\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-farmz%2Fng-otp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-farmz%2Fng-otp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-farmz%2Fng-otp-input/lists"}