Up next in 10
Angular ngx-qrcode Example to Generate QRCodes From Text and Download it as PNG Image in TS
Feb 5, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-qrcode-example-to-generate-qrcodes-from-text-and-download-it-as-png-image-in-ts/
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 friends welcome to this video
0:02
so in this video I will show you a
0:04
package inside
0:06
angular which allows you to generate QR
0:09
code from a raw text dynamically so you
0:12
can see the application right here the
0:14
QR code will be generated
0:16
dynamically and we have this text area
0:19
where we can enter the URL so as we
0:24
enter the URL you will see the QR code
0:26
will be
0:27
generated and after you return return
0:30
the URL you can simply download this QR
0:33
code as a PNG
0:38
file so in this way the QR code has been
0:41
generated so this is actually a package
0:43
here if you go to npmjs.com this is
0:46
actually the name of the package the
0:49
command is very simple techie diary SL
0:53
ngx /qr code and it's almost having
0:57
9,000 weekly downloads so I have written
0:59
a stepbystep blog post on my website
1:01
explaining you about how to get started
1:03
with this module so the link is given in
1:06
the description with full example code
1:08
so now the very first thing that you
1:10
need to do after installing this package
1:12
we need to go to this file ab. module.
1:15
typescript file and here we just need to
1:18
register this module so we just need to
1:20
add the import statement right here so
1:24
import ngx QR code module and just
1:29
import this this from this package here
1:33
and then we need to import this into the
1:35
Imports array just paste this line here
1:38
import setting that's all that we need
1:40
to do for the configuration so now you
1:43
can close this file here and now we can
1:46
move to our app. component. HTML file
1:49
right here so in this file we now need
1:53
to I will simply delete everything and
1:55
start from scratch so
1:58
here we will will declare the actual QR
2:05
code so there is a directive right here
2:07
which you can use ngx QR code this is
2:10
the opening and the closing tag in
2:12
between this you will be generating your
2:15
QR code and it actually takes some
2:18
options that you need to pass here first
2:20
of all the element type so for this we
2:25
will be declaring a variable in
2:27
typescript second we can even pass a
2:30
correction level as well each QR code
2:35
has a correction level you can even pass
2:37
this as a variable so we will declare
2:40
this value and the actual value so this
2:43
value will be coming from a text area so
2:46
providing this
2:48
value that's all these
2:50
three variables we are passing it so
2:54
after this we will declare
2:57
a text area where we will allow the user
3:00
to Simply
3:03
enter the text so we'll just be
3:06
attaching
3:08
this NG model directive and uh this will
3:12
be equal to Value so now we declared
3:16
this QR code component and outside this
3:20
we have a text area and now we just need
3:22
to go to app. component or typescript
3:25
file and declare all these variables one
3:27
by one so first of all element type
3:31
which will be
3:34
ngx QR code types do
3:39
URL secondly we'll be having the
3:42
variable to
3:45
set correction level so this will be
3:48
coming through ngx QR code correction
3:51
levels
3:53
dot
3:55
high and then the actual value so the
3:58
initial value will be
4:02
so if you see on the right hand side you
4:05
see
4:05
this QR Code by default this value is
4:09
written in the text area but even we can
4:11
change it so as we change it you will
4:13
see the QR code is
4:18
generated so after that you can right
4:20
click on the QR code and save this image
4:22
as a PNG image inside your computer so
4:25
in this easy way you can generate QR
4:27
codes inside your angular application
4:29
using using this package so I've shown
4:31
you step by step all the source code I
4:34
used in this video is given in the
4:35
description of this video you can go to
4:37
my blog post and thank you very much for
4:40
watching this video and also check out
4:42
my website as well free mediat tools.com
4:44
uh which contains thousands of tools
4:47
regarding audio video and MH and I will
4:50
be seeing you guys in the next video
#Programming