File preview in Angular16 using Open source library (ngx-doc-viewer) | Office files, pdf and images

so in today's session I will show you how you can preview of files like office files where I'm saying office then uh it will be included with uh dog talks PPT and XLS and uh PDF or images with the help of Open Source Library called ngx stock viewer so in our previous session I have done the same activity like file prepping but without any external Library so if you want to use uh that I mean if you want to give the files without any external library then you can copy that video so for this session uh you just need to consider other below steps that you need to implement in your case so first I have created a project I mean brand new project for a better understanding and the second point is once you will create the project you must have to go to that particular project location and after that you'll just have to install the ngx stock viewer which is completely open source uh in your project and after that you will just go and run your application so everything I will show you from the scripts okay so I already have created a project iron folder it's called file preview so here nothing currently so I will show you everything from the space that's why I will go and open my Visual Studio code here so inside the visual studio code I will go and select a particular folder okay this was the folder that I have created okay so now the first thing I have to do I need to clear everything from here okay so this file preview uh folder is selected now I will do one thing I will just go and open a terminal which is completely on your terminal so here you can see currently I am a location here I am in file preview so this is the complete locations but here I need to create a brand new project for uh the session so I will just write here ND new file preview and DX oh okay I'll click enter okay so in some case uh this is not related to uh I mean project creation issue uh in some cases because of for and the script is uh disabled uh in my case so for that I have a command that will bypass that particular error so here is a set execution policy scope process Egyptian policy bypass so I will bypass this particular errors then again I will go and execute the same command that I have executed Above So NG new file preview dock okay so I will click enter okay so it is asking do you need the routing yes do you need the CSS okay you can enter here as well okay so this will take I mean approximately one minute meanwhile I will show you the official talk of NG document of ngx software so here you will go and search just ntx software so the first link is uh it is from the npm JS so you will open that particular Library here you can read everything updated to that the ngx stock your data I am going to use in our solution so the everything like you can see the demo as well uh you just need to install this uh ngx talk to your library in your angular projects and after that you will just need to add this particular class in your module app dot module.ts file and after that you just need to import these things and on your HTML you just need to use this particular line of code and you can customize the size I will height and widths of the your according to your requirements so here you can see in the hundred percent and 50 percent so you can a chance according to yourself and the furthermore you can read here about the apis and everything okay so uh in terms of ndx top viewer we will have uh three types of mainly three types of viewer the here you can see I we have the office viewer we have the Google Doc here Google and another we have the URL as well so in case of if you will use the office as a viewer then you can uh I mean preview the document like people TX PPT uh docs doc SLS okay and in case of Google viewer you can preview this type of document like text PSP or something so there's a much privilege uh in terms of Google viewers and if you want to show a files like PDF or images so for that you can use the url url means uh I mean under some type of files like PDF or images is by default support by the browser so that's why you do not need any specific viewer like uh you know like for office 5 or some other specific files okay that's why you can use that URL as well so I will show you everything in details in our solution so this is the official document which is easily available so you can go through this particular document okay so I'm going to go in our Solutions now you can see our project is created so as per our slides the second point is so the first step is completed and Z file preview second point is we just need to go inside this location so here you can see I have written the file preview uh so I mean any name you can click here okay so in my case uh I have provided the name called uh file preview ngx docs okay so here I will just go inside the location I will delete this and we'll write here CD to go under this particular location so now I am in particular locations so first I will just check the application is or any successfully or not so I will write and these are also and this circle basically I have explained in our previous video so it is just open uh this particular project in the by default browser so I mean in my case the by default browser should be the Microsoft is so I mean it will take 30 to 40 second to load your data here so this is the thing uh this is by default so because I haven't changed anything in my uh default component that's why uh that thing my default things are showing here so I will just go and clear everything oh okay so for the demo purpose I am not going to create a specific component I will use this whatever component we have so now here you will go and check so everything is looks clean okay so I will go and do whatever steps is there so I will just go and use this ngx doc okay so before that uh you will just need to install this npm and check stalker as does save so I will going out from this process we'll use that commands so here you can see and just install a npm install ngx Stock here okay I will click on enter okay so it will take only 10 to 15 seconds to install because this is a very lightweighted Library okay so now it is installed one this will be installed so here you can go and check in your uh node module as well because this is installed or not so it should be like ngx okay so here you can see the nzx top viewer it is uh installed properly now uh the the next thing we need to do is we will just use this particular class I mean add this particular class in the import file of our app dot module.ts okay so I will just go in our root module.ts here inside of the import we'll add that particular so here you will have definitely a error because I haven't added the import files import Library so now the error is gone I will just click on Save another thing I need to do is so just I will copy this line of code and I'll go inside my HTML file here I will paste it okay so now as I already told you we have a different type of use like office Google URL okay so I will show you everything one by one so here uh you need to pass the URL so instead of passing a static URL I will I will just go inside our TS class here I will create a variable called file URL okay and its type should be string and equal to okay so I have some of the URL I will document URL that I need to provide here so for your understanding this is the Excel file that is online available so I have copied from there so if you will copy this product like URL and you will paste in your browser so here you will see this instead of open in the browser it will download it in your system so here you can see this file is downloaded in my system so because this is the Excel file so in at the same thing will be done with uh dot file pptx file but the same thing if you will open in your browser like that PDF file this is online available so that PDF file if you will use I mean click on that so here because of by default browser property this will be open in your browsers but in case of any file of The Office document will be downloaded so that's why the main focus is with that office files to preview in the browsers okay so here I will just go and paste uh files like so I have already copied some of the open file I will just copy this public whatever here okay and now this variable find your value variable I will use here in my HTML instead of talk okay so here I have used so the firstly I will use Office So currently the viewer type is called office so the same thing with the Google as well I will show you everything here [Music] okay okay no no so I need to run the application now so I will go here and paste and deserve all so it will again open uh Newport okay so the process is going on once this port will be open so here whatever file URL we have put it inside our TS class this file will be shown in your browser okay so now here you can see whatever file I have provided here in our TS class so this is a doc file here you can see it dot do you see extension so here this file is open okay so when you you will click on this particular full screen so here you can see the view.office.live.com uh because currently we have used uh office viewer that's why this document is opening here on the off view DOT office app.live.com okay so the same thing with the pptx and XLS as well okay so if I will show you the another URL called action so we have other URL which is a Excel which will open a Excel file so here I will just change it and paste the Excel URL and now our document should be a actual okay here I will go off okay so here you can see the Excel file is open so in case of PPT if you have a PPT file so you will just go and if you will pass whatever the file you have so according to the requirement of a project you can uh I mean use this particular Port because this is just for demo so I'm done accordingly okay so now here PPT I'm in line if it is available so the PPT is there okay so this is the case of this is the case but one thing you need to consider so in case of this PDF uh this will provide some errors so because the this viewer I mean obvious viewer is not suitable for that so if you will see in the browser so the file not found because office viewer is not suitable for that particular file so here you just need to go in your HTML and you just need to change the spine URL into the URL only because the URL is okay so again you will just go no no Ctrl Z it should be the URL URL okay so for your information uh we have the URL your as well okay so here you can see the office group well and the another viewer is called you all New York okay so in this case this PDF file is open as a URL okay so if you will use the office uh as a viewer then this PDF URL will not open it will provide some error so please uh keep consider okay so the same thing if you want to do with another viewer like so I have already shown you the office viewer URL I will show with the Google viewer as well Google okay so I will just go and check okay I will check okay so because in the nzx docker as for the ngex docker document uh so in case of Google viewer you can uh I mean provide the PDF as well so I mean somewhere uh you can see the PDF as well so here you can see the Google viewer is support uh I mean more as compared to the office viewer so office we will only support this pptx I mean whatever document is related to office but Google viewer is support the all types of documents either it is a word file or some other files images and everything so that's why in case of PDF uh in case of Google viewer that I have used you can open the PDF as well so here you can see I have used the Google viewer but uh our URL is a PDF URL and that URL is successfully open in my browser okay so in case of word as well if you have the word again so for example if I will copy this file which is a part doll for office MS office and this should be open under Google Google viewer as well because Google is responsible to open the office URL as well so here you can see the viewer is a Google viewer okay and the URL is the pptx which is uh which is a document of Ms Word file I mean MS Office file show uh if you will go in the browser so now here you can see this PPT file is open okay so also you can click on here so when you will click on here so here you can see I will have a base URL called Talk dot google.com and at their your data or whatever I mean uh data is their distribute one okay so okay so here you can see the data is showing in your Google doc viewer okay so this is the things that I want to uh so so in our previous system I have done the same activity like so in the URL uh I'm installing the document with the help of code but in this decisions I've just our intentions to show you with the help of the external Library which is totally free called ndf you and GH dog here you can show the same I mean files and everything in your code okay so I hope this video looks helpful to you so if you feel this video is helpful then please like And subscribe our Channel foreign

Channel: TechWorld with MJ

Views: 3,994

Keywords: Angular, File preview, ngx doc viewer, Angular16, preview document in angular, world file showing, file showing in angular, document preview

Id: JBiQk0JqOXU

Length: 20min 28sec (1228 seconds)

Published: Thu Jun 29 2023