SmdOtpUi
Angular Otp UI template
[(https://www.npmjs.com/package/smd-otp-ui)]
Installation
npm install smd-otp-ui
How to use
import the otp-ui module in the module file of the your component as below
import { SmdOtpUiModule } from 'smd-otp-ui';
@NgModule({
declarations: [],
imports: [
SmdOtpUiModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Usage
use the selector smd-otp-ui
Input
use the length property length="n"
to define the length of the otp number
here n
is the natural number which accepts number greater than or eqauls to 4
Otput
use the output property to access the form control values of the opt as onInputChange
function
properties
Input decorator | Otput decorator |
---|---|
length |
onInputChange |
Example
Input | Otput |
---|---|
length= "4" | (onInputChange)= "recievedOTP($event)" |
app.component.html
<div>
<smd-otp-ui length="4" (onInputChange) = 'onRecievedOtp($event)'></smd-otp-ui>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'smd-otp-ui-app';
otp:any = ''
onRecievedOtp(eve:any){
console.log("app",eve)
this.otp = eve
}
}
Description
<smd-otp-ui length="6" (onInputChange) = 'onRecievedOtp($event)'></smd-otp-ui>
It accept the input property of length and output property of onInputChange method.
Generally if you not provide the length it takes the default length as 4
.
Use the $event
for receiving the output which is entered to the otp input elements.
onInputChange
function takes the param $event and gives the output as array.
Example
entered otp inputs to otp elemsts as 190684 its gives output as `[1, 9, 0, 6, 8, 4]`.
it only emits the output when the total number of inputs are entered.