https://github.com/lbgm/otp-widget

OTP code input widget for Angular
https://github.com/lbgm/otp-widget

angular angularcomponent otp otp-verification widget

Last synced: 4 days ago
JSON representation

OTP code input widget for Angular

• Host: GitHub
• URL: https://github.com/lbgm/otp-widget
• Owner: lbgm
• Created: 2023-01-16T13:14:15.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-18T13:30:08.000Z (almost 2 years ago)
• Last Synced: 2024-11-06T04:40:22.369Z (8 days ago)
• Topics: angular, angularcomponent, otp, otp-verification, widget
• Language: TypeScript
• Homepage:
• Size: 153 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# OtpWidget

OTP code input widget for Angular

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.

![image](https://user-images.githubusercontent.com/92580505/212340376-892b9ee4-1cd3-4e38-bd2b-eed867c50221.png)

## install

```sh

npm i @lbgm/otp-widget

```

## Props

  Type:

   ```ts

   type TGap = "otp-gap-1" | "otp-gap-2" | "otp-gap-3" | "otp-gap-4" | "otp-gap-5" | "otp-gap-6" | "otp-gap-7" | "otp-gap-8" | "otp-gap-9" | "otp-gap-10" | "otp-gap-11" | "otp-gap-12" | "otp-gap-13" | "otp-gap-14" | "otp-gap-15" | "otp-gap-16" | "otp-gap-17" | "otp-gap-18" | "otp-gap-19" | "otp-gap-20" | "otp-gap-21" | "otp-gap-22" | "otp-gap-23" | "otp-gap-24" | "otp-gap-25" | "otp-gap-26" | "otp-gap-27" | "otp-gap-28" | "otp-gap-29" | "otp-gap-30" | "otp-gap-31" | "otp-gap-32" | "otp-gap-33" | "otp-gap-34" | "otp-gap-35" | "otp-gap-36" | "otp-gap-37" | "otp-gap-38" | "otp-gap-39" | "otp-gap-40" | "otp-gap-41" | "otp-gap-42" | "otp-gap-43" | "otp-gap-44" | "otp-gap-45" | "otp-gap-46" | "otp-gap-47" | "otp-gap-48";

   ```

   Defaults values & types

   ```js

    @Input() childs?: number = 4;

    @Input() type?: "number" | "text" = "number";

    @Input() placeholder?: string = '';

    @Input() gap?: TGap = "otp-gap-16";

   ```

 ## Events

 `code`: sends value filled as `string`;

 `filled`: when all inputs are filled;

## Use

 `app.module.ts` :

 ```ts

  //...

  import { OtpWidgetModule } from '@lbgm/otp-widget';

  @NgModule({

    declarations: [

        AppComponent

    ],

    imports: [

        BrowserModule,

        OtpWidgetModule

    ],

    providers: [],

    bootstrap: [AppComponent]

  })

  export class AppModule { }

 ```

 `app.component.html` :

 ```html

    

 ```

 ![image](https://user-images.githubusercontent.com/92580505/212340494-fa18c90b-cb68-4813-817d-e188343719e4.png)