document preview in angular 17 using ngx-dox-viewer | document rending in angular

Hello friends welcome to my channel hereis in this video Let Me Explain how to preview documents in angular application using third party Library ngx do Weare so the steps are very simple as usual first we have to install the packages and then we have to import ngx do Vier model so after that we can use this ngx do Vier component okay so let me go to the npm site and this is the library we supposed to install so before that we can read the instruction this component can be used to show several document types in angular application here the only condition is documents that are publicly available so we can start the implementation so application in running mode I just stopped and executing this command for installing this ngx do viewer okay the installation get it's completed the next thing is uh we have to import the model for doing this uh implementation I have created one separate component the document viewer and this is the Standalone component only so let me inject our model here ngx doc view model okay so if you have the model based uh component means you have to import this ngx doc Vier model in our respective models okay so now let me save this one also we can run this application and one more thing this common already registered in our app routing model okay you can see this see in this browser okay so next what I'm going to do let me declare one variable for document URL okay I have some document that I already uploaded in this Google Drive so so we can use the document here next in our HTML site let me use ngx doc beer next in this component we can pass the URL so URL is nothing but our document URL okay next we can use the viewer so let me provide you all so we can save this one the document is loaded but the height is not fixed so let me include one style here see now docum extension is D only okay so the same way I'm having one more re for the pp so let me just change this URL see so PBT also loaded fine be the height see now now it is much better so next we can use one Excel link see it is loaded the Excel file also so finally we can preview one PDF file for previewing the PDF uh we can use the PDF here also I have created the separate video for that anyway using the ngx doc viewer also we can preview the PDF files don't have any additional options it is just previewing our document okay so the technically it's very easy we are just installing the packages and then uh importing our model so after that we can use this uh component in our application and setting uh our document URL is the URL here okay it's working fine for all the document types here the only problem is we cannot directly use the static or documents instead of that we can use the document URL but the one thing is the document should be available in the public it should not have any access restriction okay now we are in the end of the video so if you still have any doubts or clarification please post in the comment box so in my next video I will come up with one of the interesting topics so please stay tuned for my next video thank you thanks for watching

Channel: Nihira Techiees

Views: 2,278

Keywords: ngx document viewer in angular 17, ngx doc viewer in angular, preview documents in angular 17, nihira techiees, angular 17, document preview in angular, how to view documents in angular 17

Id: 1M8o1kKCjis

Length: 4min 59sec (299 seconds)

Published: Wed Dec 27 2023