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

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

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 {}

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

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

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

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);
  }
}

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.