Node's Pastoral Musicians

    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.

    Install

    npm i smd-otp-ui

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    none

    Unpacked Size

    95.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • siva_sankula_19