Angular DOCX viewer: Display Word documents with Nutrient

To display a DOC or DOCX file in Angular, load it with Nutrient Web SDK. The SDK converts the Word document to PDF in the browser and displays the result in its viewer. Microsoft Office and a separate conversion server aren’t required for this standalone integration.

This tutorial covers Word viewing and annotation of the converted PDF. It doesn’t build a native Word editor. If your application also needs spreadsheets, presentations, and images, use the Angular file viewer tutorial.

Try the Office viewer demo with a representative document before integrating the SDK.

Before you start

• Use a Node.js version supported by your Angular version; check the Angular setup guide(opens in a new tab).
• Use a browser-rendered Angular application. Server-side rendering requires a separate browser-only initialization path.
• Have a DOC or DOCX file ready to serve from your application.
• Confirm your Nutrient trial or license includes Office document viewing. Annotation and editing features depend on your licensed components.

Setup

Install Angular CLI and create a browser-rendered project:

npm install -g @angular/cli
ng new nutrient-word-viewer
cd nutrient-word-viewer

Choose CSS, no routing, and no server-side rendering (SSR) if prompted. Current Angular CLI defaults to standalone components and the app.ts, app.html, and app.css filenames used below. Check your installed CLI with ng version; see the Angular project-creation reference(opens in a new tab) for the available options.

Add Word viewing with Nutrient Web SDK

Nutrient Web SDK accepts a Word document as input and displays its PDF representation. See the Office conversion guide for details of that conversion.

The following steps configure viewer assets, load a DOCX file, and mount the viewer in your Angular application.

Step 1 — Install the Nutrient viewer

Install the SDK package using your preferred package manager:

npm install @nutrient-sdk/viewer

The example loads runtime assets from Nutrient’s content delivery network (CDN) with useCDN: true. Keep Angular’s default public asset entry in angular.json; there’s no need to copy SDK assets from node_modules. To serve the runtime assets from your own domain, follow the self-hosting guide and use its baseUrl configuration instead.

Step 2 — Create and configure the DOCX viewer

1. Use Angular CLI to create a new component:

ng generate component docx-viewer --standalone

This creates the component’s HTML, TypeScript, and CSS files in src/app/docx-viewer.

2. In docx-viewer.html, add a container where the viewer will mount:

<div class="docx-viewer">
  <div #viewerContainer style="width: 100%; height: 100vh"></div>
</div>

The viewerContainer template reference identifies the element where the SDK renders its UI.

Load and render the Word document

In src/app/docx-viewer/docx-viewer.ts, load the SDK after Angular initializes the view. Unload it when Angular destroys the component:

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";

@Component({
  selector: "app-docx-viewer",
  standalone: true,
  templateUrl: "./docx-viewer.html",
  styleUrls: ["./docx-viewer.css"],
})
export class DocxViewer implements AfterViewInit, OnDestroy {
  @ViewChild("viewerContainer")
  private viewerContainer!: ElementRef<HTMLDivElement>;
  private destroyed = false;
  private sdk?: typeof import("@nutrient-sdk/viewer")["default"];

  ngAfterViewInit(): void {
    void this.loadViewer();
  }

  private async loadViewer(): Promise<void> {
    try {
      const { default: NutrientViewer } = await import("@nutrient-sdk/viewer");
      if (this.destroyed) return;
      this.sdk = NutrientViewer;

      const configuration = {
        useCDN: true,
        document: new URL("document.docx", document.baseURI).href,
        container: this.viewerContainer.nativeElement,
        // licenseKey: "YOUR_LICENSE_KEY", // Add your trial or production key.
      };
      await NutrientViewer.preloadWorker(configuration);
      if (this.destroyed) return;

      const instance = await NutrientViewer.load(configuration);
      // Loading may finish after Angular removes this component.
      if (this.destroyed) NutrientViewer.unload(instance);
    } catch (error: unknown) {
      if (!this.destroyed) console.error("Unable to load the document", error);
    }
  }

  ngOnDestroy(): void {
    this.destroyed = true;
    if (this.viewerContainer) {
      this.sdk?.unload(this.viewerContainer.nativeElement);
    }
  }
}

The dynamic import keeps the SDK in a separate lazy chunk, outside Angular’s initial bundle budget. The component preloads the conversion worker before opening the document and checks whether it has been destroyed after each asynchronous step.

Add the DOC or DOCX file you want to display to the public directory as document.docx. You can use our demo document as an example.

Step 3 — Display the viewer in your app

To display the viewer, import DocxViewer in your root component.

Replace the contents of src/app/app.ts with the following:

import { Component } from "@angular/core";
import { DocxViewer } from "./docx-viewer/docx-viewer";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [DocxViewer],
  templateUrl: "./app.html",
  styleUrls: ["./app.css"],
})
export class App {}

Replace the contents of src/app/app.html with the following:

<app-docx-viewer></app-docx-viewer>

This mounts the document viewer in your root component.

Step 4 — Run the application

Start your Angular app with:

npm start

Open the local URL printed by the Angular development server. The viewer should display the PDF representation of your Word document. Available annotation and editing tools depend on your license.

A note about fonts

Nutrient substitutes fonts that are unavailable during Office conversion. A substitute can change line breaks and pagination. Supply appropriately licensed font files using the custom font guide. Then compare the converted document with your original Word file.

Adding even more capabilities

Annotations, signatures, page manipulation, and PDF content editing apply to the converted PDF, not directly to the original DOCX file. Choose the licensed capabilities your workflow needs:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

Conclusion

Use the Office viewer demo to check your documents and fonts. Then follow the Web SDK getting-started guide for trial setup. For a wider range of input formats, continue with the Angular file viewer tutorial.

FAQ