Up next in 10
Build Angular Office File Doc Viewer to Render PDF,DOCX,PPT & Excel Files Using ngx-doc-viewer in TS
30 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this video
0:05
so in this video I will show you a
0:06
angular module which allows you to
0:09
render different files directly in the
0:13
browser so it can be a word document
0:16
file it can be a PDF document it can be
0:19
excel file or ppt file as well so it can
0:23
you can say it's a Microsoft uh uh files
0:27
viewer kind of a module which supports
0:29
multiple files to be displayed right in
0:31
the browser itself you just need the URL
0:33
of the file and then you can display
0:35
them so you can see the demo of this app
0:38
so we have pasted the link of the PDF
0:40
file that you want to display you in
0:42
this module so it is displaying it right
0:45
here in the browser itself so you don't
0:48
need to download the
0:50
file so it directly displaying the PDF
0:54
file here you can read the PDF
0:56
file and similarly we also can display
1:00
word document file as well so if I paste
1:02
the link of a word document
1:05
files so it takes a URL property and you
1:09
basically paste the address so now this
1:12
is a word document file here you can see
1:14
it has displaying it right in the
1:16
browser itself
1:19
and similarly it can be a PPT file as
1:21
well so if I paste the URL of a PPT file
1:27
here so again you will see it will now
1:30
display this PPT file which has multiple
1:33
slides so you just need the URL of the
1:35
file and then you can plug that inside
1:37
this module and then it will display
1:39
this so the module name is
1:42
ngx if you go to npmjs.com just search
1:45
for this module
1:47
ngx
1:48
doc
1:50
viewer you may say it's a file viewer
1:53
ultimate word document viewer which
1:55
supports m multiple file types so the
1:59
command is very simple you simply
2:01
execute this command and it's got almost
2:04
32,000 weekly downloads so it's a pretty
2:06
popular module so now to get started
2:10
it's very simple here you need to go to
2:12
this file here
2:13
app.module.ts file so first of all you
2:16
need to register this so for registering
2:18
it we simply need to add the import line
2:22
uh just write here import in curly
2:25
bracket here we just need
2:28
to import this module and inside this
2:31
module we have this function or module
2:34
you may say is
2:37
ngx doc viewer module so you import this
2:41
and then you go to the imports array
2:43
simply add this module that you imported
2:46
right here that's all the configuration
2:48
part simply now close this file and then
2:51
go to this file app do.component HTML
2:54
file and right here you have this module
2:57
here so you can simply say
3:00
ngx doc viewer opening and the closing
3:04
tag so now it takes a property here
3:07
which is the URL property uh here you
3:10
paste whichever file that you want to
3:23
display it can be a word document it can
3:26
PDF Excel file as well and then it also
3:30
takes a property of a viewer which
3:35
is Google file viewer and then you can
3:38
even style it as well providing a fixed
3:41
width of 100% and a height
3:46
of you can just add a fixed height and
3:52
width so you can see now it is
3:55
displaying it it's a word document
4:01
so you can see it's a file editor
4:06
library which supports multiple files so
4:08
it's very easy to integrate you simply
4:11
go to app domodule simply import this
4:14
and then you can start using it it's
4:16
very simple just need the URL of the
4:18
file and then plug this URL and then the
4:21
user may read this document right in the
4:24
browser itself so you don't need any
4:27
special kind of software you can
4:29
directly use this module inside your
4:31
angular
4:32
application and uh thank you very much
4:35
for watching this video and uh also
4:38
check out my website free media
4:40
tools.com uh which contains unlimited
4:43
tools regarding audio video and image
4:46
and I will be seeing you in the next
4:48
live stream
#Programming