An Angular library that simplifies the integration of OTP (One-Time Password) input fields into your Angular applications. This library offers customizable and secure OTP input components to enhance user authentication experiences.
npm install --save wts-otp
import { Component } from "@angular/core";
import { WtsOtpComponent, IOptions } from "wts-otp";
@Component({
selector: "<COMPONENT-SELECTOR>",
standalone: true,
imports: [WtsOtpComponent],
templateUrl: "<COMPONENT>.html",
styleUrl: "<COMPONENT>.scss",
})
export class MyComponent {
protected otp!:string;
options: IOptions = {
digits: 4
placholder: '-' //●|★|-
type: 'text'
};
protected getOTP(e: string): void {
this.otp = e;
}
}
<wts-otp [options]="options" (getValue)="getOTP($event)"></wts-otp>
Name | Description |
---|---|
(Optional) options: IOptions
|
*Default: {}* |
Name | Description |
---|---|
getValue: Function
|
Trigger after a valid otp entered |
:host {
--border: solid 2px #545353;
--borderRadius: 4px;
--fontWeight: 600;
--fontSize: 16px;
--fontColor: #1b1b1b;
--placeholderColor: #000;
--inputHeight: 46px;
--inputWidth: 60px;
--gapBetweenInput: 5px;
--focusBorderColor: green;
--invalidInputBorderColor: #e84545;
}