How to integrate OTP input in Angular

Reading Time: 3 minutes

Hi folks, Welcome again! I hope you are doing well. I am thrilled to see you here. So today, we talk about the OTP input and look at how we can integrate OTP input in an angular project. 

Also, In this blog, you will get a logical understanding of OTP input, what it can and can’t do, and also, you will get a piece of knowledge about when to use them and — more importantly — when not to.

So before diving deep into the pool, Let’s talk about OTP input.

What’s an OTP Input?

As you know, OTP stands for One Time Password, an automatically generated sequence of numeric or alphanumeric strings of characters. This string is available for one time only, as its name says. Because of this feature, it is very rugged and not easy to break.

Now about the OTP Input:

If you aren’t familiar with the term, an OTP input is a form component for strings. Each character in the queue is typed into a separate box, and the component switches between boxes as you type (as opposed to you needing to click into each box).

It’s called an OTP input because they’re usually used to let users type the One Time Password they’ve received via another channel, usually email, SMS, or Call.

Project Setup

Create an angular project.

If you have not created the angular project yet, you can create project by running the following command in a terminal window.

ng new <project-name>

Install the package.

After creating the project, you need to install the dependency of OTP input by this command.

npm install --save ng-otp-input

For a specific version, you can use the below command.

npm install --save ng-otp-input@1.8.1

Here: 1.8.1 is the version.

Update the App Module for the dependency.

After adding the dependency, we need to add NgOtpInputModule from the ng-otp-input in the app.module.ts file, as shown below.

This above declares the availability of the NgOtpInputModule in the complete project.

ADD the OTP input feature to the component

Now opens any of the components in your angular project where you want to add the feature, and then add the below code to create the OTP input in the DOM.

<ng-otp-input  (onInputChange)="onOtpChange($event)"  [config]="{length:5}"></ng-otp-input>


<ng-otp-input  [formCtrl]="YourFormControl"  [config]="{length:5}"></ng-otp-input>

After that, it’s all completed. OTP component is added to your project.

Now you can run your angular project and check out the component in the DOM. Command to run angular project:

ng serve --open

Supplementary Bits

This feature also provides some additional configuration that helps you to modify the input feature according to your use case.

Name TypeRequired Description
configobjecttrueVarious configuration options to customize the component
onOtpChangefunctionfalseThe function that will receive the OTP. Not needed if formCtrl is passed
formCtrlFormControlfalseIf their value is set to the passed form control, there is no need to subscribe to onOtpChange.
setValuefunctionfalseCall the setValue method of the component to update the component value.

A configuration option in OTP input

lengthnumbertrueThe number of OTP inputs to be rendered.
inputStylesobjectfalseStyle applied to each input. Check for more info.
inputClassstringfalseClass is applied to each input.
containerClassstringfalseClass used to the container element.
containerStylesobjectfalseStyle applied to the container element. Check for more info.
allowNumbersOnlybooleanfalseset true to allow only numbers as input
allowKeyCodesstring[]falseBy default, numbers alphabets and _ – are permitted. You can define other key codes if needed.
isPasswordInputbooleanfalseset true for password type input
disableAutoFocusbooleanfalseThe first input will be auto-focused on component load and the following empty input on setValue execution. Set this flag to true to prevent this behavior
placeholderstringfalseinput placeholder
letterCasestringSet the value to Upper or Lower to change the otp to upper case or lower case.


After the above steps, you have completed the implementation of the OTP-input in your angular project. You can modify the configuration according to your work.

To learn more about OTP input, authentication, and authorization, refer here.

Stay in touch with us!

This blog helped you learn something new and that you liked this blog. Please share it with your friends and colleagues, and For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.

Written by 

Front-End Developer at Knoldus Helping the company to develop and maintain a better code base for reusability. He is recognized as a multi-talented, multitasker, and adaptive to the different work environments. Have experience in technologies such as Angular, Typescript, SCSS, Tailwind and Javascript.