A powerful and versatile Angular component for viewing multiple file formats including PDF, Word (DOC/DOCX), Excel (XLS/XLSX), and PowerPoint (PPT/PPTX) files with both continuous scroll and page-by-page view modes.
- 📄 PDF Viewer - Full-featured PDF viewing with zoom, rotation, navigation
- 📝 Word Documents - Display DOC and DOCX files with proper formatting
- 📊 Excel Spreadsheets - View XLS and XLSX files with sheet navigation
- 📽️ PowerPoint Presentations - View PPT and PPTX slides
- 🔄 Dual View Modes - Toggle between continuous scroll and page-by-page view
- 🎨 Customizable Toolbar - Configure which controls to display
- 📱 Responsive Design - Works seamlessly on desktop and mobile devices
- ⬇️ Download Control - Enable/disable file downloads
- 🖨️ Print Support - Print documents directly from the viewer
- 🔍 Auto File Type Detection - Automatically detects file type from extension
- 🌐 SSR Compatible - Works with Angular Universal
- 💪 TypeScript Support - Fully typed for better development experience
| Angular Version | Package Version |
|---|---|
| 17.x | 1.x.x |
| 16.x | 1.x.x |
| 15.x | 1.x.x |
| 14.x | 1.x.x |
| 13.x | 1.x.x |
| 12.x | 1.x.x |
npm install ngx-universal-file-vieweryarn add ngx-universal-file-viewer🚀 Getting Started For Angular 14+ (Standalone Components)
import { Component } from '@angular/core';
import { NgxUniversalFileViewerComponent } from 'ngx-universal-file-viewer';
@Component({
selector: 'app-document-viewer',
standalone: true,
imports: [NgxUniversalFileViewerComponent],
template: `
<ngx-universal-file-viewer
[src]="fileUrl"
[fileType]="'auto'"
[viewMode]="'continuous'">
</ngx-universal-file-viewer>
`
})
export class DocumentViewerComponent {
fileUrl = 'assets/sample.pdf';
}For Angular 12-13 (Module-based)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUniversalFileViewerModule } from 'ngx-universal-file-viewer';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgxUniversalFileViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }📖 Basic Usage Simple Implementation
<ngx-universal-file-viewer
[src]="fileUrl"
[fileType]="'auto'">
</ngx-universal-file-viewer>TypeScript
export class AppComponent {
fileUrl = 'https://example.com/document.pdf';
}With All Options
<ngx-universal-file-viewer
[src]="fileSource"
[fileType]="fileType"
[viewMode]="viewMode"
[showToolbar]="showToolbar"
[viewerConfig]="viewerConfig"
[toolbarConfig]="toolbarConfig"
(onLoad)="handleLoad($event)"
(onError)="handleError($event)"
(pageChange)="handlePageChange($event)"
(viewModeChange)="handleViewModeChange($event)">
</ngx-universal-file-viewer>