Up next in 10
Angular ng-otp-input Example to Build OTP Form Input Field to Receive OTP Password in TypeScript
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ng-otp-input-example-to-build-otp-form-input-field-to-receive-otp-password-in-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a
0:04
OTP number module inside angular where
0:08
you can allow user to enter notification
0:10
OTP Verification codes so you can have
0:15
as many length here you will see we have
0:17
five letter digit OTP digit component
0:21
here it's a special library for angle uh
0:24
which is specifically built for angula
0:26
if you go to npmjs.com this is actually
0:29
the package here NG OTP Das
0:35
input so Ence this is actually the
0:39
package here the command is very simple
0:41
I've already installed it and uh it's
0:44
almost having 35,000 weekly download so
0:48
I written a step by-step blog post on my
0:50
website you can refer it in the link in
0:52
the
0:53
description so the very first thing we
0:55
need to do you need to go to this app.
0:58
module. TS file after installing this we
1:01
just need to go to this and add this
1:03
import statement so we simply say
1:06
import NG
1:09
OTP input module and it will be coming
1:13
from this package NG
1:16
OTP
1:19
input so you simply import this and then
1:22
you go to the Imports are and simply add
1:24
this import module right here so now
1:28
this is all the configuration code which
1:29
is required now you just need to go to
1:32
app. component.
1:34
HTML so wherever you need to embed
1:37
this so I will show you step by step
1:44
here so now to embed this we simply use
1:47
this directive
1:49
NGP Das
1:53
input opening and closing tag so you
1:56
will see on the right hand side you will
1:58
see by default it expect it's 4digit OTP
2:01
but you can even control that as well
2:03
you can first of all give it a reference
2:05
which is NG
2:15
OTP and then we can attach the
2:18
configuration objects by passing this
2:20
config option so here you can
2:24
attach the
2:26
configuration object
2:29
and then we can even
2:31
bind
2:37
a this uh on input
2:42
change so when you change the OTP this
2:46
call back function will
2:54
execute so we binded this on input
2:57
change so when the OTP changes this
2:59
function will execute holding the actual
3:02
OTP
3:05
code so that's all the options it
3:08
supports so now in the typescript you
3:10
can make your configuration object so
3:13
this configuration object you can have
3:16
all these
3:19
properties if you only want to allow
3:21
numbers there is a property for this
3:24
which is
3:26
allow numbers only and it's
3:30
false you can even put this to true as
3:33
well length you can control it to
3:36
five so all these parameters you can
3:39
control
3:43
it so if you see this is five letter
3:46
digit if I change it
3:47
to three you will see it will change to
3:51
three and you can control the width and
3:54
the height as well by the input styles
3:56
if I make it 150 the width so you will
4:00
see the width will be
4:02
150 so in this way you can control
4:04
everything the width height how many
4:07
digit of OTP that you want to accept you
4:10
can even put a restriction that only
4:12
numbers are required so if I put it to
4:15
true so now I can't enter the correctors
4:18
right here only numbers are allowed so
4:21
in this way you can put this restriction
4:24
and on OTP change this call back
4:26
function will execute whenever you enter
4:28
the OTP so so you can get the OTP here
4:31
in the console so as soon as the user
4:34
writes this
4:35
OTP you will get this
4:41
notification so this is a very nice
4:44
module in angular if you want to accept
4:46
OTP input Fields coming from user you
4:48
can initialize it very easily I showed
4:50
you step by step process this is
4:53
essentially the package so thank you
4:55
very much for watching this video and
4:57
also check out my website as well fre
4:59
mediat tools.com uh which contains
5:02
thousands of tools regarding audio video
5:04
and image and I will be seeing you in
5:06
the next video