Angular Office Document Viewer

Open DOCX, XLSX, PPTX, PDF, and other supported documents in Angular through a browser-local custom element without a server-side conversion service.

Use the Viewer as an Angular custom element

Angular supports Web Platform custom elements through CUSTOM_ELEMENTS_SCHEMA. Register the DocViewKit package once, query the docviewkit-viewer element, and pass the selected document to its open() method.

CUSTOM_ELEMENTS_SCHEMA keeps Angular's normal template validation while allowing dash-named custom elements. NO_ERRORS_SCHEMA is not required.

Standalone Angular component

sh
npm install @docviewkit/viewer
ts
import '@docviewkit/viewer';
import {
  AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA,
  ElementRef, Input, ViewChild
} from '@angular/core';

type ViewerElement = HTMLElement & {
  open(file: File): Promise<unknown>;
  close(): Promise<void>;
};

@Component({
  selector: 'app-office-viewer',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: '<docviewkit-viewer #viewer />'
})
export class OfficeViewerComponent implements AfterViewInit {
  @ViewChild('viewer') viewer?: ElementRef<ViewerElement>;
  #file?: File;

  @Input() set file(file: File | undefined) {
    this.#file = file;
    void this.open();
  }

  ngAfterViewInit() { void this.open(); }

  private async open() {
    if (this.#file && this.viewer) {
      await this.viewer.nativeElement.open(this.#file);
    }
  }
}

The host component owns file selection, permissions, error presentation, and business workflow. DocViewKit owns document parsing, viewing, search, navigation, and structured diagnostics.

Verify the complete integration