smd-otp-ui
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

SmdOtpUi

Angular Otp UI template

alt text

[Npm Version(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.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i smd-otp-ui

    Weekly Downloads

    1

    Version

    1.1.0

    License

    none

    Unpacked Size

    95.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • siva_sankula_19