How To Add A Document Viewer In Angular 10

Introduction

 
In this article, we will learn how to create a document viewer in an Angular 10 application. We can show many different document formats in Angular applications.
 
Prerequisites
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap
Create an Angular project by using the following command.
  1. ng new Timepicker
 Open this project in Visual Studio Code and install Bootstrap by using the following command.
  1. npm install bootstrap --save      
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.
  1. @import '~bootstrap/dist/css/bootstrap.min.css';    
 Now install ngx-doc-viewer by using the following command. 
  1. npm install ngx-doc-viewer --save  
 Now create a new component by using the following command.
  1. ng g c Docviewer  
 Now open docviewer.component.html file and add the following code,
  1. <div class="row">    
  2.     <div class="col-sm-12 btn btn-primary">    
  3.         How to Add a document Viewer in Angular 10  
  4.     </div>    
  5.   </div>  
  6. <ngx-doc-viewer [url]="DemoDoc" [viewer]="viewer" style="width:100%;height:100vh;"></ngx-doc-viewer>  
 Now open docviewer.component.ts file and add the following code,
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-docviewer',  
  5.   templateUrl: './docviewer.component.html',  
  6.   styleUrls: ['./docviewer.component.css']  
  7. })  
  8. export class DocviewerComponent implements OnInit {  
  9.   viewer = 'google';  
  10.   selectedType = 'docx';   
  11.   DemoDoc="http://www.africau.edu/images/default/sample.pdf"  
  12.   constructor() { }  
  13.   
  14.   ngOnInit(): void {  
  15.   }  
  16.   
  17. }  
Now open docviewer.component.css file and add the following code,
  1. :host {  
  2.     display: block;  
  3.   }  
  4.   p {  
  5.     font-family: Lato;  
  6.   }  
Open app.moudle.ts file and add the following code: 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { AppRoutingModule } from './app-routing.module';  
  5. import { AppComponent } from './app.component';  
  6. import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';    
  7. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  8. import { NgxDocViewerModule } from 'ngx-doc-viewer';  
  9. import { DocviewerComponent } from './docviewer/docviewer.component';  
  10.   
  11. @NgModule({  
  12.   declarations: [  
  13.     AppComponent,  
  14.     DocviewerComponent  
  15.       
  16.   ],  
  17.   imports: [  
  18.     BrowserModule,BrowserAnimationsModule,FormsModule,NgxDocViewerModule,  
  19.     AppRoutingModule  
  20.   ],  
  21.   providers: [DatePipe],  
  22.   bootstrap: [AppComponent]  
  23. })  
  24. export class AppModule { }  
 Now open app.component.html file and add the following code,
  1. <app-docviewer></app-docviewer>  
 Now run the project by using the following command: 'npm start'
 
 
We can view many different document formats using this library. Create  another component and check another file format. Create a new component using the following command.
  1. ng g c Docviewerdemo   
  Now open docviewerdemo.component.html file and add the following code, 
  1. <div class="row">    
  2.     <div class="col-sm-12 btn btn-primary">    
  3.         How to Add a document Viewer in Angular 10  
  4.     </div>    
  5.   </div>  
  6. <ngx-doc-viewer [url]="DemoDoc" [viewer]="viewer" style="width:100%;height:90vh;"></ngx-doc-viewer>  
  Now open docviewerdemo.component.ts file and add the following code,
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-docviewerdemo',  
  5.   templateUrl: './docviewerdemo.component.html',  
  6.   styleUrls: ['./docviewerdemo.component.css']  
  7. })  
  8. export class DocviewerComponent implements OnInit {  
  9.   viewer = 'google';  
  10.   selectedType = 'txt';   
  11.   DemoDoc="https://www.le.ac.uk/oerresources/bdra/html/resources/example.txt"  
  12.   constructor() { }  
  13.   
  14.   ngOnInit(): void {  
  15.   }  
  16.   
  17. }  
Now open app.component.html file and add the following code,
  1. <app-docviewerdemo></app-docviewerdemo>   
Now run the project by using the following command: 'npm start'
 
 
 

Summary

 
In this article, we learned how to add document viewer in Angular 10 applications.