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

Stackblitz Demo