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
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
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.