Up next in 10
Build Angular PDF Viewer & Renderer in Browser Using ng2-pdf-viewer Library in TypeScript
Jun 13, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this live
0:04
streams In this live stream I will show
0:06
you a angular module which allows you to
0:09
display PDF documents right in the
0:12
browser itself It's a specific library
0:14
designed for PDF files only and it's
0:17
very easy to integrate inside your
0:19
angular application You can see the live
0:21
demo We are displaying a PDF document
0:25
right from the URL and the user is able
0:28
to read the PDF file directly in the
0:31
browser You don't need to download the
0:33
file or use any sort of special software
0:36
It actually renders your PDF
0:39
file directly in the browser So the
0:43
module name is NG2 PDF viewer So if you
0:46
go to npmjs.com
0:48
uh just search for this module which is
0:51
ng2
0:53
pdf viewer So now to install this the
0:57
command is very simple Uh you simply
1:00
install
1:03
this npm ng2 pdf viewer This is a
1:06
command and then it's a very popular
1:09
module almost two uh two lakh weekly
1:12
downloads So now
1:15
to get started I will start from scratch
1:19
So the very first thing you need to do
1:20
you need to go to this file app
1:22
domodule.ts file and here you need to
1:25
configure this module So for configuring
1:28
it it's very easy You simply import the
1:30
line
1:31
here which is import and we need to
1:36
import this module
1:38
ng2 PDF viewer and from this it contains
1:42
a module here which is PDF viewer module
1:46
and for this you also need the forms
1:48
module as well of angular which is a
1:51
built-in module So you simply import
1:53
this at earlier and then you need to go
1:56
to the imports array Simply import this
1:58
module that you imported plus your forms
2:02
module So now you can close this file
2:04
and then go to this file here
2:06
app.component html
2:09
file and right here you simply embed the
2:12
module which is PDF
2:15
viewer opening and closing tab So now it
2:20
takes some options So the very first
2:22
option it takes is the source property
2:25
So whichever file you want to display
2:27
you will directly plug the URL So let me
2:30
say sample
2:35
PDF You can take this URL from internet
2:39
Any PDF file you can
2:41
take So let's suppose I take this file
2:44
copy link address and directly paste it
2:47
right in this property
2:54
So what you can do is that you can
2:56
declare a variable inside your
2:58
typescript So app dot component dot So
3:01
just declare this variable and paste the
3:04
address After you paste it you do need
3:08
to actually provide some more options
3:10
right here The second option is uh the
3:14
size here
3:17
So let me just paste all the options it
3:20
supports It's a full editor PDF editor
3:24
So you will see it supports all these
3:26
options The width as well You can
3:28
control the width the height as well And
3:31
then apart from that it also have
3:33
various options for the zoom
3:36
functionality You can also rotate the
3:38
PDF file at a angle as well So rotation
3:41
original size show all fit to pace You
3:45
can zoom as well zoom your PDF file So
3:48
it has all these options that you can
3:50
play with this So the configuration part
3:53
is very simple You require the module
3:55
and then you place
3:58
the document link whichever document
4:01
that you want to display
4:14
So the module name is NGX ng2 PDF viewer
4:19
So you first of all import this add this
4:21
to the imports array and
4:28
then so if you go to their website they
4:31
do offer the demo as well So you can
4:33
check out the actual demo You can choose
4:36
the file and here you can test it
4:44
So this is their official demo website
4:47
where they provide the demo So it's a
4:49
simple component for rendering PDF files
4:51
directly in the browser You can select
4:53
various properties right
4:58
here So it's a great module here You can
5:01
even zoom the PDF file as well
5:03
So it's a very good component for
5:06
Angular applications
5:08
So thank you very much for watching this
5:10
video and also check out my website
5:13
freemediattools.com
5:15
uh which contains unlimited number of
5:18
tools regarding audio video and image
5:21
and I will be seeing you in the next
5:23
live stream