DocumentViewer for Angular

TX Text Control's document processing technologies can be also leveraged by Angular applications. This article shows how to integrate the TX Text Control DocumentViewer into an Angular web application. In addition to this project, a Viewer Backend project is required and can be created using ASP.NET Core. You don't have to actually add a view to this backend server. All you need to do is to add the NuGet package to your .NET Core-based backend server.

Getting Started

This tutorial shows how to create your first Angular application using TX Text Control DocumentViewer for Angular.

Prerequisites

1. Install Node.js® and npm, if not done before.

2. Open a Command Prompt and install the Angular CLI globally by typing in the following command:

   npm install -g @angular/cli

This tutorial uses Visual Studio Code that can be downloaded for free.

Creating the Angular Project

1. Open a Command Prompt and create a new project and default app by typing in the following command:

   ng new my-viewer-app

   Follow the questions in the command prompt by answering them with "y" to add Angular routing and Enter to confirm CSS as your preferred stylesheet format.

2. Change into the created folder by typing in the following command:

   cd my-viewer-app

3. Install the TX Text Control document editor package by typing in the following command:

   ng add @txtextcontrol/tx-ng-document-viewer

4. Open this folder in Visual Studio Code by typing in the following command:

   code .

5. In Visual Studio Code, open the file src -> app -> app.component.html, add the following code and save it. Replace yourtoken with your actual access token you created at the beginning of this tutorial.

   • HTML

   ​<tx-document-viewer
       width = "800px"
       height = "800px"
       basePath = "https://backend.textcontrol.com?access-token=yourtoken"
       documentData = "SGVsbG8gdGhlcmU="
       dock = "Window"
       [toolbarDocked] = "true"
       documentPath = "test.docx"
       [isSelectionActivated] = "true"
       [showThumbnailPane] = "true">
   </tx-document-viewer>

   <tx-document-viewer width = "800px" height = "800px" basePath = "https://backend.textcontrol.com?access-token=yourtoken" documentData = "SGVsbG8gdGhlcmU=" dock = "Window" [toolbarDocked] = "true" documentPath = "test.docx" [isSelectionActivated] = "true" [showThumbnailPane] = "true"> </tx-document-viewer>

6. Back in the command prompt, start the Angular application by typing in the following command:

   ng serve --open

Your default browser is opened with your created Angular app:

Component Configuration Syntax

The following lists the available component attributes. Mandatory attributes are width, height and basePath.

• HTML

​<tx-document-viewer
    width = "800px"
    height = "800px"
    basePath = "https://backend.textcontrol.com?access-token=yourtoken"
    documentData = "SGVsbG8gdGhlcmU="
    dock = "Window"
    [toolbarDocked] = "true"
    documentPath = "test.docx"
    [isSelectionActivated] = "true"
    [showThumbnailPane] = "true">
</tx-document-viewer>

signatureSettings Object

• HTML

​<tx-document-viewer
   width = "800px"
   height = "800px"
   basePath = "https://backend.textcontrol.com?access-token=yourtoken"
   dock = "Fill"
   [toolbarDocked] = "true"
   documentPath = "test.docx"
   [isSelectionActivated] = "true"
   [showThumbnailPane] = "true"
   [signatureSettings] = "{
        showSignatureBar: true,
        signatureBoxName: 'txsign',
        redirectUrlAfterSignature: 'https://www.textcontrol.com',
        ownerName: 'Paul', signerName: 'Jacob',
        signerInitials: 'PK' }">
</tx-document-viewer>

JavaScript API

All client-side packages are based on the same component and supports the same JavaScript interface:

TXDocumentViewer Object

It is possible to access the object directly using this object or by wrapping the interface in TypeScript as shown in the above demo that shows how to load documents.