Events in Angular OTP Input component

14 Jun 20247 minutes to read

This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input component.

created

The OTP Input component triggers the created event when the component rendering is completed.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
            <div class="wrap">
                <div id='otp-container' style="width: 350px;">
                    <div ejs-otpinput id='otp_default' (created)="created()"></div>
                </div>
            </div>`
})

export class AppComponent {
  public created(){
    //Your required action here
  };
}

focus

The OTP Input component triggers the focus event when the OTP Input is focused. The OtpFocusEventArgs passed as an event argument provides the details of the focus event.

import { Component } from '@angular/core';
import { OtpFocusEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
            <div class="wrap">
                <div id='otp-container' style="width: 350px;">
                    <div ejs-otpinput id='otp_default' (focus)="focus($event)"></div>
                </div>
            </div>`
})

export class AppComponent {
    public focus(args: OtpFocusEventArgs) {
      //Your required action here
    };
}

blur

The OTP Input component triggers the blur event when the OTP Input is focused out. The OtpFocusEventArgs passed as an event argument provides the details of the blur event.

import { Component } from '@angular/core';
import { OtpFocusEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
            <div class="wrap">
                <div id='otp-container' style="width: 350px;">
                    <div ejs-otpinput id='otp_default' (blur)="blur($event)"></div>
                </div>
            </div>`
})

export class AppComponent {
    public blur(args: OtpFocusEventArgs) {
      //Your required action here
    };
}

input

The OTP Input component triggers the input event when the value of each OTP Input is changed. The OtpInputEventArgs passed as an event argument provides the details of the each value is changed.

import { Component } from '@angular/core';
import { OtpInputEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
            <div class="wrap">
                <div id='otp-container' style="width: 350px;">
                    <div ejs-otpinput id='otp_default' (input)="input($event)"></div>
                </div>
            </div>`
})

export class AppComponent {
    public input(args: OtpInputEventArgs) {
      //Your required action here
    };
}

valueChanged

The OTP Input component triggers the valueChanged event when the value of the OTP Input is changed and matching the Otp input length.The OtpChangedEventArgs passed as an event argument provides the details when value is changed.

import { Component } from '@angular/core';
import { OtpChangedEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
            <div class="wrap">
                <div id='otp-container' style="width: 350px;">
                    <div ejs-otpinput id='otp_default' (valueChanged)="valueChanged($event)"></div>
                </div>
            </div>`
})

export class AppComponent {
    public valueChanged(args: OtpChangedEventArgs) {
      //Your required action here
    };
}

Below example demonstrates the valueChanged event of the OTP Input component.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { OtpChangedEventArgs, OtpInputModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, OtpInputModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
    <div class="wrap">
        <div id='otp-container' style="width: 350px;">
            <div ejs-otpinput id='otp_default' (valueChanged)="valueChanged($event)"></div>
        </div>
    </div>`
})

export class AppComponent {
    public valueChanged(args: OtpChangedEventArgs) {
        alert("Entered OTP value: " + args.value);
    };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

index.css

/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
}