DEV Community

loading...
Cover image for Angular : How to add A fully customizable, one-time password input component in your angular app just in 10 minutes?

Angular : How to add A fully customizable, one-time password input component in your angular app just in 10 minutes?

RajeshKumarYadav.com
I am Rajesh, a Technology Specialist by profession and a Technical Blogger by passion. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.
Originally published at developersdiscussion.com Updated on ・2 min read

Image

You can use this component in your app and extend it to SMS API, here I will skip API part as it varies from sms provider to provider.

Let's begin to learn how to add otp component in your angular app.

Step 1 - Install dependency

npm install --save ng-otp-input
Enter fullscreen mode Exit fullscreen mode

Step 2 - Add NgOtpInputModule to imports app.module.ts something like

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgOtpInputModule } from 'ng-otp-input';

@NgModule({ 
declarations: [AppComponent], 
imports: [BrowserModule, NgOtpInputModule], 
bootstrap: [AppComponent] 
})
Enter fullscreen mode Exit fullscreen mode

Here in your existing app you have to add import { NgOtpInputModule } from 'ng-otp-input'; near all existing imports and then add imports in NgModule as NgOtpInputModule with your existing code.

Step 3 - Open your choice of component's ts html file where you want to add OTP feature and add below code -

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

All done, OTP component is added.

Extra Bits

When I decided to add this to my own website https://rajeshkumaryadav.com/#/auth then I thought of to write config in ts file and pass it in html as below, I will write some more code below which I am using in my website like if all digits are entered then validation should be done etc. If you are happy with default feature you can skip this extra bits part.

auth.component.html

 <ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" *ngIf="showOtpComponent" [config]="config" ></ng-otp-input>
Enter fullscreen mode Exit fullscreen mode

as my config list is long, I will define it in ts file

auth.component.ts

otp: string; showOtpComponent = true; 
@ViewChild("ngOtpInput", { static: false }) ngOtpInput: any; config = { allowNumbersOnly: true, length: 4, isPasswordInput: false, disableAutoFocus: false, placeholder: "*", inputStyles: { width: "50px", height: "50px", }, }; 

constructor(private router: Router) {} // OTP Code onOtpChange(otp) { this.otp = otp; // When all 4 digits are filled, trigger OTP validation method if (otp.length == 4) { this.validateOtp(); } } setVal(val) { this.ngOtpInput.setValue(val); } onConfigChange() { this.showOtpComponent = false; this.otp = null; setTimeout(() => { this.showOtpComponent = true; }, 0); } validateOtp() { // write your logic here to validate it, you can integrate sms API here if you want } 
Enter fullscreen mode Exit fullscreen mode

Please note that in above config, you can make necessary changes as per your requirements.

Live Demo -

https://rajeshkumaryadav.com/#/auth

Discussion (0)