File Preview in Angular using Open source library (ngx-doc-viewer)

When it comes to displaying various file types such as office files, pdfs, and images in an Angular application, ngx-doc-viewer is a great open-source library that can be used. It provides a simple and easy way to preview files without the need for any external plugins or viewers.

Supported File Types

The ngx-doc-viewer supports a wide range of file types including:

• Microsoft Office files (Word, Excel, PowerPoint)
• PDF files
• Images (JPEG, PNG, GIF, etc.)

How to Use ngx-doc-viewer in Angular

Integrating ngx-doc-viewer into an Angular application is quite straightforward. First, you need to install the library using the following command:

npm install ngx-doc-viewer

Once installed, you can import the NgxDocViewerModule into your Angular module and use the ngx-doc-viewer component to display the files. Here’s an example of how to use ngx-doc-viewer in your Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-file-preview',
  template: `
    
  `,
})
export class FilePreviewComponent {
  fileUrl: string = 'https://example.com/path-to-your-file';
}

Customization and Options

ngx-doc-viewer provides various options for customizing the file preview such as setting the width, height, and other styling properties. You can also specify whether to preview the file in fullscreen mode or embed it in a specific container within your application.

Conclusion

Using the ngx-doc-viewer library in Angular makes it easy to preview various file types without the need for external dependencies. Its support for office files, pdfs, and images makes it a versatile solution for handling file previews in Angular applications.