OtpInputModel API in Angular Otp Input API component

Interface for a class OtpInput

Properties

blur

EmitType<OtpFocusEventArgs>

Event triggers when the Otp input is focused out.

created

EmitType<Event>

Event triggers after the creation of the Otp Input.

focus

EmitType<OtpFocusEventArgs>

Event triggers when the Otp input is focused.

input

EmitType<OtpInputEventArgs>

Event triggers each time when the value of each Otp input is changed.

valueChanged

EmitType<OtpChangedEventArgs>

Event triggers after the value is changed and the Otp input is focused out.

ariaLabels

string[]

Defines the ARIA-label attribute for each input field in the Otp (One-Time Password) input component. Each string in the array corresponds to the ARIA-label attribute for each input field.

<div ejs-otpinput [ariaLabels]="ariaLabels"></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public ariaLabels: string[] = ['otp-input-1', 'otp-input-2', 'otp-input-3', 'otp-input-4'];
}

autoFocus

boolean

Specifies whether the OTP input field should automatically receive focus when the component is rendered.

cssClass

string

Defines one or more CSS classes that can be used to customize the appearance of the Otp (One-Time Password) input component.

disabled

boolean

Specifies whether the Otp input component is disabled. When set to true, the component is disabled and user input is not allowed.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

htmlAttributes

{ : }

Specifies additional HTML attributes to be applied to the Otp (One-Time Password) input component.

<div ejs-otpinput [htmlAttributes]="htmlAttributes"></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public htmlAttributes = { name: 'otp-input'};
}

length

number

Specifies the length of the Otp (One-Time Password) to be entered by the user. This determines the number of input fields in the Otp Input.

<div ejs-otpinput length='4'></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

placeholder

string

Specifies the text that is shown as a hint/placeholder until the user focuses on or enters a value in the Otp Input. If a single text is provided, it will be used for all input fields; otherwise, each text letter will be used for each field.

<div ejs-otpinput placeholder="x"></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

separator

string

Specifies the separator used to separate each input field in the Otp Input component. The separator is displayed between each input field.

<div ejs-otpinput separator="/"></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

stylingMode

string | OtpInputStyle

Specifies the style variant for the input fields in the Otp Input component.

<div ejs-otpinput stylingMode="outlined"></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

textTransform

string | TextTransform

Specifies the case transformation for the OTP input text. Valid values are:

• TextTransform.Uppercase for uppercase transformation.
• TextTransform.Lowercase for lowercase transformation.
• TextTransform.None for no transformation.

type

string | OtpInputType

Specifies the input type of the Otp.

<div ejs-otpinput type="number"></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

value

string | number

Specifies the value of the Otp (One-Time Password) input. This can be a string or a number, representing the Otp value entered by the user.

<div ejs-otpinput value='1234'></div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}