@doc-preview/angular

Angular standalone component for multi-format document preview, built on @doc-preview/core. PDF viewer, DOCX, images, Office formats (with @doc-preview/office), and Enterprise annotations, watermark, split view, print, search, redaction, and document diff.

Current release: 1.1.2 — Depends on @doc-preview/core ^1.1.2. See monorepo CHANGELOG.

Repository & docs: github.com/rajkishorsahu89/doc-preview

Demo: doc-preview-app.vercel.app — tool · demo · guide · API

What's in 1.0.0

• DocPreviewComponent — selector doc-preview; URL, Blob, base64, and upload sources
• Enterprise licence key — enterpriseLicenseKey activates @doc-preview/enterprise modules
• Built-in upload — enableUpload, uploadAccept, and config.upload for header picker + dropzone
• Phase events — (phaseChange) for loading, error, and retry UX
• Re-exports all public symbols from @doc-preview/core

Ships as ESM with TypeScript declarations. Works with Angular 19+, 20, and 21 (@angular/core, @angular/common). Import @doc-preview/themes CSS in angular.json or global styles.

Keywords: doc-preview angular standalone document-viewer pdf docx annotations watermark split-view

Install

npm install @doc-preview/angular @doc-preview/themes
# Adds @doc-preview/core automatically.
# Peer deps: @angular/core ^19 || ^20 || ^21, @angular/common ^19 || ^20 || ^21.
# Optional enterprise:
npm install @doc-preview/enterprise
# Optional Office formats (XLSX, PPTX, legacy .doc/.ppt, cloud viewer):
npm install @doc-preview/office

Supported file types

All formats below work through <doc-preview> once the right packages are installed and renderers registered (registerBuiltinPreviewRenderers(); add registerOfficePreviewRenderers() from @doc-preview/office for Office rows).

| Category | Extensions | Package | | --- | --- | --- | | PDF | .pdf | core | | Images | .png, .jpg, .jpeg, .gif, .webp, .bmp, .svg, .tif, .tiff | core | | Word | .docx, .docm, .dotx | core | | Word (legacy) | .doc | office | | Excel | .xlsx, .xlsm, .xltx, .xls, .ods | office | | PowerPoint | .pptx, .pptm, .potx, .ppt, .odp | office | | OpenDocument text | .odt | office | | CSV / TSV | .csv, .tsv | core | | Text & data | .txt, .md, .log, .json, .xml | core | | HTML | .html, .htm | core | | Video / audio | .mp4, .webm, .mov, .mp3, .wav, .m4a | core | | Cloud embed (public URL) | .doc, .ppt, .pptx, .xlsx, .pdf, .odt, .ods, .odp | office |

Upload accept: .pdf,.doc,.docx,.docm,.dotx,.odt,.ods,.odp,.xls,.xlsx,.xlsm,.xltx,.ppt,.pptx,.pptm,.potx,.png,.jpg,.jpeg,.gif,.webp,.bmp,.svg,.tif,.tiff,.mp4,.webm,.mov,.mp3,.wav,.m4a,.txt,.md,.html,.htm,.csv,.tsv,.json,.xml,.log

Usage — component

// app.component.ts
import { Component } from "@angular/core";
import { DocPreviewComponent } from "@doc-preview/angular";
import type { PreviewDocument } from "@doc-preview/core";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [DocPreviewComponent],
  template: `
    <doc-preview
      [documents]="documents"
      (phaseChange)="onPhase($event)"
      enterpriseLicenseKey=""
    />
  `
})
export class AppComponent {
  documents: PreviewDocument[] = [
    { uri: "/assets/sample.pdf", fileName: "sample.pdf" }
  ];

  onPhase(event: unknown) {
    console.log(event);
  }
}

Add styles once in angular.json:

"styles": ["node_modules/@doc-preview/themes/doc-preview.css"]

Or in global styles.css:

@import "@doc-preview/themes/doc-preview.css";

Usage — upload & Blob sources

<doc-preview
  [documents]="documents"
  [enableUpload]="true"
  uploadAccept=".pdf,.png,.docx,.xlsx"
  (filesSelected)="onFiles($event)"
/>

import { createPreviewDocumentsFromFiles } from "@doc-preview/core";

onFiles(files: File[]) {
  this.documents = createPreviewDocumentsFromFiles(files);
}

Usage — Enterprise features

Install @doc-preview/enterprise and pass a licence key:

<doc-preview
  [documents]="documents"
  enterpriseLicenseKey="DP-ENT-DEMO-0001-ANNOTATIONS-SPLIT"
  [config]="enterpriseConfig"
  (enterpriseStatusChange)="onEnterprise($event)"
/>

import type { PreviewConfig } from "@doc-preview/core";

enterpriseConfig: PreviewConfig = {
  enterprise: {
    watermarkText: "CONFIDENTIAL",
    enableAnnotations: true,
    enablePrint: true,
    enableSearch: true,
    enableRedaction: true,
    splitView: true,
    splitDiffView: true,
    diffView: true
  },
  pdf: {
    annotations: { storageKey: "my-app", documentId: "doc-1" }
  }
};

Demo key (documentation only): DP-ENT-DEMO-0001-ANNOTATIONS-SPLIT

Usage — Office pack

Register Office renderers once at bootstrap (e.g. main.ts):

import { registerBuiltinPreviewRenderers } from "@doc-preview/core";
import { registerOfficePreviewRenderers } from "@doc-preview/office";

registerBuiltinPreviewRenderers();
registerOfficePreviewRenderers();

config: {
  office: {
    cloudViewer: "auto",       // "auto" | "microsoft" | "google" for public HTTPS URLs
    legacyDocPreview: "auto"   // "text" | "html" | "auto" for legacy .doc Blobs
  }
}

DOCX is built into @doc-preview/core — no cloud required.

Usage — licence helpers

import {
  syncEnterpriseLicenseFromKey,
  toPreviewEnterpriseFlags
} from "@doc-preview/angular";

syncEnterpriseLicenseFromKey("YOUR-LICENSE-KEY");
const flags = toPreviewEnterpriseFlags(/* from enterprise package */);

API

DocPreviewComponent inputs

| Input | Type | Description | | --- | --- | --- | | documents | PreviewDocument[] | Required. Documents to preview (URL, Blob, base64, ArrayBuffer). | | activeIndex | number | Active document index (default 0). | | config | PreviewConfig | Viewer options — upload, PDF, enterprise, office, CSV, image signatures. | | requestHeaders | Record<string, string> | Auth headers for document fetches. | | prefetchMethod | "GET" \| "POST" | HTTP method for URL sources. | | dark | boolean | Dark theme tokens. | | theme | PreviewThemeTokens | Custom CSS variable overrides. | | slots | PreviewSlots | Header slot overrides. | | enterpriseLicenseKey | string | Activates @doc-preview/enterprise when valid. | | enableUpload | boolean | Enables built-in header upload control. | | uploadAccept | string | File picker accept string (e.g. .pdf,.png). |

DocPreviewComponent outputs

| Output | Type | Description | | --- | --- | --- | | phaseChange | PreviewPhaseEvent | Loading, ready, error phases with retry callback. | | enterpriseStatusChange | { licensed: boolean } | Emitted when licence key changes. | | documentChange | { document, index } | Active document changed. | | filesSelected | File[] | User picked files via built-in upload. |

Angular vs React naming

| Angular | React | | --- | --- | | <doc-preview> | <DocPreview /> | | (phaseChange) | onPhaseChange | | (filesSelected) | onFilesSelected | | enterpriseLicenseKey | enterpriseLicenseKey |

Browser support

Requires a modern browser with fetch, Blob, and canvas (PDF.js). The component renders client-side DOM via the shared renderer.

Angular SSR: mount <doc-preview> only in the browser (e.g. afterNextRender or @if (isBrowser)) because rendering uses document and HTMLElement.

Related packages

• @doc-preview/core — framework-agnostic engine (auto-installed).
• @doc-preview/themes — shared CSS.
• @doc-preview/enterprise — optional licensing and gated features.
• @doc-preview/office — XLSX, PPTX, legacy Office, cloud viewer.
• @doc-preview/react — React component on the same core.
• @doc-preview/js — vanilla createDocPreview host.

License

MIT