import { Component , ViewChild } from '@angular/core' ; import { Config } from 'src/models/config' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent { otp : string ; showOtpComponent = true ; @ ViewChild ( 'ngOtpInput' , { static : false } ) ngOtpInput : any ; config : Config = { allowNumbersOnly : false , length : 5 , isPasswordInput : false , disableAutoFocus : false , placeholder : '' , inputStyles : { 'width' : '50px' , 'height' : '50px' } } ; onOtpChange ( otp ) { this . otp = otp ; } setVal ( val ) { this . ngOtpInput . setValue ( val ) ; } toggleDisable ( ) { if ( this . ngOtpInput . otpForm ) { if ( this . ngOtpInput . otpForm . disabled ) { this . ngOtpInput . otpForm . enable ( ) ; } else { this . ngOtpInput . otpForm . disable ( ) ; } } } onConfigChange ( ) { this . showOtpComponent = false ; this . otp = null ; setTimeout ( ( ) => { this . showOtpComponent = true ; } , 0 ) ; } }