Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 ngx-otp-input Example to Receive One Time Password & Fill it inside TextBox in TypeScript

Posted on January 23, 2023

 

 

Welcome folks today in this blog post we will be displaying the otp input component in angular 14 using the ngx-otp-input library in browser using typescript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new angular app using the below command as shown below

 

 

ng new sampleapp

 

 

cd sampleapp

 

 

And after that you need to install the below library using the npm command as shown below

 

 

npm i ngx-otp-input

 

 

And after that you will see the below directory structure of the angular app as shown below

 

 

 

 

And after that you need to go to app.module.ts file and copy paste the following code

 

 

app.module.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
 
import { AppComponent } from "./app.component";
import { NgxOtpInputModule } from "ngx-otp-input";
 
@NgModule({
  imports: [BrowserModule, FormsModule, NgxOtpInputModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

 

 

Now we need to go to app.component.html file and copy paste the following code

 

 

app.component.html

 

 

1
2
<ngx-otp-input [config]="otpInputConfig" (otpChange)="handeOtpChange($event)" (fill)="handleFillEvent($event)">
</ngx-otp-input>

 

 

As you can see we are rendering the otp-input component where we have attached the attribute for the config and then we have the otpChange event where we are writing the code when the otp code is changed. And then when the otp code is filled then also we are executing the method using the fill attribute.

 

 

And now we need to go to app.component.ts file and copy paste the following code

 

 

app.component.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component } from '@angular/core';
import { NgxOtpInputConfig } from 'ngx-otp-input';
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  otpInputConfig: NgxOtpInputConfig = {
    otpLength: 6,
    autofocus: true,
    classList: {
      inputBox: 'my-super-box-class',
      input: 'my-super-class',
      inputFilled: 'my-super-filled-class',
      inputDisabled: 'my-super-disable-class',
      inputSuccess: 'my-super-success-class',
      inputError: 'my-super-error-class',
    },
  };
 
  handeOtpChange(value: string[]): void {
    console.log(value);
  }
 
  handleFillEvent(value: string): void {
    console.log(value);
  }
}

 

 

As you can see we have defined all the methods here to check the otp if it’s valid and also we have assigned all the css classes for success and error messages.

 

 

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme