How to integrate OTP input in Angular

Table of contents

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	Type	Required	Description
config	object	true	Various configuration options to customize the component
onOtpChange	function	false	The function that will receive the OTP. Not needed if formCtrl is passed
formCtrl	FormControl	false	If their value is set to the passed form control, there is no need to subscribe to onOtpChange.
setValue	function	false	Call the setValue method of the component to update the component value.

A configuration option in OTP input

Name	Type	Required	Description
length	number	true	The number of OTP inputs to be rendered.
inputStyles	object	false	Style applied to each input. Check https://angular.io/api/common/NgStyle for more info.
inputClass	string	false	Class is applied to each input.
containerClass	string	false	Class used to the container element.
containerStyles	object	false	Style applied to the container element. Check https://angular.io/api/common/NgStyle for more info.
allowNumbersOnly	boolean	false	set true to allow only numbers as input
allowKeyCodes	string[]	false	By default, numbers alphabets and _ – are permitted. You can define other key codes if needed.
isPasswordInput	boolean	false	set true for password type input
disableAutoFocus	boolean	false	The 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
placeholder	string	false	input placeholder
letterCase	string	—	Set the value to Upper or Lower to change the otp to upper case or lower case.

Conclusion

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.