This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
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
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]
})
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>
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>
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 }
Please note that in above config, you can make necessary changes as per your requirements.
Live Demo -
https://rajeshkumaryadav.com/#/auth
This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
Rajesh Kumar Yadav | Sciencx (2021-06-05T03:45:51+00:00) Angular : How to add A fully customizable, one-time password input component in your angular app just in 10 minutes?. Retrieved from https://www.scien.cx/2021/06/05/angular-how-to-add-a-fully-customizable-one-time-password-input-component-in-your-angular-app-just-in-10-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.