Appearance in Angular OTP Input component
14 Jun 20246 minutes to read
You can also customize the appearance of OTP Input component.
Setting input length
You can specify the length of OTP by using the length property. The default value is 4
.
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 length='5'></div>
</div>
</div>`
})
export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 50px auto;
}
Disable inputs
You can disable the OTP Input component by using the disabled property. By default the value is false
.
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 disabled="true"></div>
</div>
</div>`
})
export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 50px auto;
}
CssClass
You can customize the appearance of the OTP Input component, such as by changing its colors, fonts, sizes or other visual aspects by using the cssClass property.
The OTP input component supports the following predefined styles that can be defined using the cssClass
property. You can customize by replacing the cssClass
property with the below defined class names.
cssClass | Description |
---|---|
e-success |
Used to represent a positive action. |
e-warning |
Used to represent an action with caution. |
e-error |
Used to represent a negative action. |
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 cssClass="e-success"></div>
</div>
</div>`
})
export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 50px auto;
}