@lbgm/otp-widget
v1.0.0
Published
OTP code input widget for Angular
Downloads
54
Maintainers
Readme
OtpWidget
OTP code input widget for Angular
This library was generated with Angular CLI version 12.2.0.
install
npm i @lbgm/otp-widget
Props
Type:
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
@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
:
//...
import { OtpWidgetModule } from '@lbgm/otp-widget';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
OtpWidgetModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
:
<otp-widget (filled)="filled($event)" (code)="otp = $event"></otp-widget>