
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
ngx-otp-pin
Advanced tools
A reusable, standalone Angular OTP input component supporting multiple character types, automatic focus movement, and style customization from the parent.
A reusable, standalone Angular OTP input component supporting multiple character types, automatic focus movement, and style customization from the parent.
digits
, letters
, alphanumeric
, etc.)@HostBinding
This component is standalone
. You can import it directly into your Angular project and use it where needed.
npm i ngx-otp-pin
import { NgxOtp } from 'ngx-otp-pin';
<ngx-otp
[size]="5"
[isPassword]="true"
(opt)="otp=$event"
[inputClass]="'abc'"
/>
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.
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);
}
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>
FAQs
A reusable, standalone Angular OTP input component supporting multiple character types, automatic focus movement, and style customization from the parent.
The npm package ngx-otp-pin receives a total of 12 weekly downloads. As such, ngx-otp-pin popularity was classified as not popular.
We found that ngx-otp-pin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.