A powerful Angular component for viewing PDF, Word, Excel, and PowerPoint files with continuous scroll and page-by-page view modes. Supports Angular 12+
npm install ngx-universal-file-viewer
bash
npm install ngx-universal-file-viewer
`
#### Or Using Yarn:
`bash
yarn add ngx-universal-file-viewer
`
š Getting Started
For Angular 14+ (Standalone Components)
`bash
import { Component } from '@angular/core';
import { NgxUniversalFileViewerComponent } from 'ngx-universal-file-viewer';
@Component({
selector: 'app-document-viewer',
standalone: true,
imports: [NgxUniversalFileViewerComponent],
template:
})
export class DocumentViewerComponent {
fileUrl = 'assets/sample.pdf';
}
`
For Angular 12-13 (Module-based)
`bash
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUniversalFileViewerComponent } 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
`bash
[src]="fileUrl"
[fileType]="'auto'"
[viewMode]="'continuous'"
[showToolbar]="true"
>
`
TypeScript
`bash
export class AppComponent {
fileUrl = 'https://example.com/document.pdf';
}
`
With All Options
`bash
[src]="fileSource"
[fileType]="fileType"
[viewMode]="viewMode"
[showToolbar]="showToolbar"
[viewerConfig]="viewerConfig"
[toolbarConfig]="toolbarConfig"
(onLoad)="handleLoad($event)"
(onError)="handleError($event)"
(pageChange)="handlePageChange($event)"
(viewModeChange)="handleViewModeChange($event)">
``