1.3.7 • Published 2 months ago
wts-otp v1.3.7
Angular Multidigits OTP v-17+
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.
Instaltion
npm install --save wts-otp
Getting started
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;
}
}
HTML
<wts-otp [options]="options" (getValue)="getOTP($event)"></wts-otp>
Properties
Name | Description |
---|---|
(Optional) options: IOptions | *Default: {}* |
Methods
Name | Description |
---|---|
getValue: Function | Trigger after a valid otp entered |
Style Customization
: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;
}
Example
1.3.7
2 months ago
1.3.6
2 months ago
1.3.5
3 months ago
1.3.4
3 months ago
1.3.3
3 months ago
1.3.2
3 months ago
1.3.1
3 months ago
1.2.8
3 months ago
1.2.7
3 months ago
1.3.0
3 months ago
1.2.9
3 months ago
1.2.6
4 months ago
1.2.5
4 months ago
1.2.4
4 months ago
1.2.3
4 months ago
1.2.0
4 months ago
1.2.2
4 months ago
1.2.1
4 months ago
1.1.9
4 months ago
1.1.8
4 months ago
1.1.7
4 months ago
1.1.6
4 months ago
1.1.1
5 months ago
1.1.0
5 months ago
1.0.1
5 months ago
1.0.0
5 months ago
1.1.5
5 months ago
1.1.4
5 months ago
1.1.3
5 months ago
1.1.2
5 months ago
0.0.5
9 months ago
0.0.3
9 months ago
0.0.2
9 months ago
0.0.1
9 months ago