
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.
ng new Timepicker
Open this project in Visual Studio Code and install Bootstrap by using the following command.
npm install bootstrap --save
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.
@import '~bootstrap/dist/css/bootstrap.min.css';
Now install ngx-doc-viewer by using the following command.
npm install ngx-doc-viewer --save
Now create a new component by using the following command.
ng g c Docviewer
Now open docviewer.component.html file and add the following code,
<div class="row">
<div class="col-sm-12 btn btn-primary">
How to Add a document Viewer in Angular 10
</div>
</div>
<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,
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-docviewer',
templateUrl: './docviewer.component.html',
styleUrls: ['./docviewer.component.css']
})
export class DocviewerComponent implements OnInit {
viewer = 'google';
selectedType =