Up next in 10
Angular ngx-extended-pdf-viewer Example to Display PDF Documents From URL in Browser Using TS
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 uh welcome to this video
0:04
so in this video i will show you a
0:05
angular module which allows you to embed
0:08
your pdf documents right in the browser
0:10
itself it's a extended pdf viewer uh
0:14
this is actually the package name here
0:16
if you go to npmjs.com
0:18
uh just search for this package ngx
0:21
extended
0:23
pdf viewer so this is actually the name
0:26
of the package here the command is
0:29
simple npm ngx extended pdf viewer and
0:33
you can see it's having 96,000 weekly
0:35
download it's a pretty popular module
0:37
for angular applications if you want to
0:39
embed pdf documents from url directly
0:42
inside your application so they do offer
0:45
the demo here you can visit this website
0:48
so you can see this is the way by which
0:51
you can inside your html template of
0:53
your angular application you use this
0:57
ngx extended pdf viewer component and
1:00
this component takes some properties
1:02
here so the source property whichever
1:05
pdf file you want to embed the second
1:07
property is the height you can control
1:10
the height text layer if you also want
1:12
to show the hand tool you can put this
1:15
to true and file name for download if
1:17
you also want to allow the user to
1:19
download the file you can put this
1:21
attribute give it a file name so these
1:23
are all the attributes of of this actual
1:26
angular component which allows you to
1:28
embed your pdf files so they do offer
1:31
the live demo as well you will see
1:35
so this is their documentation here you
1:37
can see they have given all these
1:39
instructions first of all you install
1:41
this package here by executing this
1:43
command then you simply need to go to
1:46
the angular json file and you need to
1:49
add this input like this the assets
1:53
directory
1:55
and then inside your typescript you
1:57
import this document right here this
2:00
component here pdf default options then
2:03
you set this
2:07
you also import this inside your app
2:10
domodulets file and then you import this
2:14
like this so they do offer this simple
2:17
documentation
2:20
and this is their live demo here you
2:23
will see
2:28
you can zoom in you can zoom out as well
2:31
you will see
2:35
so these are basic parameters
2:38
and in the background it is using this
2:40
uh library here which is pdfjs
2:44
which is again a open-source library for
2:47
embedding pdf documents right in the
2:49
browser it's developed by mozilla so if
2:52
so it is using this library in the
2:54
background for building this actual
2:57
third party package for angular
3:00
so you simply create angular project and
3:04
write here inside your app dot component
3:07
file here
3:10
so let me just open a complete example
3:13
and show to you
3:17
so here you declare the source url
3:20
whichever pdf file you want to embed you
3:22
declare a variable and after that inside
3:25
your app dot component html file here
3:32
you actually pass this
3:36
pdf source here you will see you can
3:38
even pass the zoom level as well so this
3:41
is a very useful package here uh the
3:44
command is simple here you can see you
3:45
can install this and start using it
3:50
and uh in this easy way you can embed
3:54
your pdf documents right in the browser
3:56
itself so these are all the default
3:58
options that it supports here
4:02
so thank you very much guys for watching
4:04
this video and also check out my website
4:07
freemediattools.com
4:09
uh which contains thousands of tools and
4:12
i will be seeing you in the next live
4:15
stream
#Computers & Electronics