Input Types in Angular OTP Input component

14 Jun 20247 minutes to read

Types

This section explains the the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases.

Number type

You can set the type property to number to use this input type as number. This is ideal for OTP input scenarios with numeric-only codes. By default type property is number.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { 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 type="number" value=1234></div>
        </div>
    </div>`
})

export class AppComponent { }

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;
}

Text type

You can set the type property to text to use this input type as text. This is suitable when the OTP input need to include both letters and numbers.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { 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 type="text" value="e3c7"></div>
        </div>
    </div>`
})

export class AppComponent { }

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;
}

Password type

You can set the type property to password to use this input type as password in the otp Input.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { 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 type="password" value="1234"></div>
        </div>
    </div>`
})

export class AppComponent { }

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;
}

Value

You can specify the value of OTP Input by using the value property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { 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 value="1234"></div>
        </div>
    </div>`
})

export class AppComponent { }

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;
}