Angular

In an Angular application, two npm packages add the DS Server components: tx-ds-document-editor for the Document Editor and tx-ds-document-viewer for the Document Viewer. Each component loads its script from DS Server, gets an access token and creates the editor or viewer in your template. Their attributes, defaults, settings objects and load events are listed below, taken from the README and the type declarations of version 5.0.0.

Step-by-step tutorials are in Getting Started: Document Editor in Angular and Document Viewer in Angular.

Packages and Requirements

Both packages support Angular 19, 20 and 21 through their peer dependencies on @angular/core and @angular/common, and install @angular/cdk in the same version range. Their READMEs require DS Server 5.0.0 or later. You also need a security profile of your DS Server, or a trial token, as Overview explains.

Install the Packages

Add a package with the Angular CLI in the folder of your project:

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

ng add installs the package and imports its module into the root module of the application; for the viewer, it also imports HttpClientModule. The viewer component always needs HttpClient, which it uses to request its access token.

The components are declared in their modules, not as standalone components. The Angular CLI creates standalone applications by default since version 17. In such an application, ng add installs the package but finds no root module to import into: the schematic of version 5.0.0 prints a message that asks you to add the module (and, for the viewer, HttpClientModule) to your components yourself, while the READMEs name the error Bootstrap call not found. Either create the project with ng new --no-standalone, or import the module yourself into the imports of the standalone component that shows the editor or viewer, and for the viewer add HttpClientModule as well:

import { Component } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { DocumentViewerModule } from '@txtextcontrol/tx-ng-ds-document-viewer';

@Component({
  selector: 'app-root',
  imports: [DocumentViewerModule, HttpClientModule],
  templateUrl: './app.component.html'
})
export class AppComponent { }

Write the Attributes

In a template, write string values as plain attributes. Bind Boolean values, numbers, arrays and objects with square brackets:

<tx-ds-document-editor
  width="1000px"
  height="600px"
  serviceURL="https://ds.example.com"
  oauthClientID="<client ID>"
  oauthClientSecret="<client secret>"
  editMode="ReadAndSelect"
  [userNames]="['user1', 'user2']">
</tx-ds-document-editor>

width, height and serviceURL are required. serviceURL must start with http:// or https://; otherwise, the component throws the error Invalid service URL. When the component is initialized, it removes oauthClientID and oauthClientSecret from the rendered element.

tx-ds-document-editor

The component loads documentData when the editor raises textControlLoaded, and jsonData when it raises ribbonTabsLoaded.

The dsDocumentEditorLoaded Event

The component loads the editor script from DS Server at run time, so the global TXTextControl object doesn't exist when your component is created. When the script has loaded, the component raises dsDocumentEditorLoaded on the document object. Handle it in the component that holds the editor:

import { Component, HostListener } from '@angular/core';

declare const TXTextControl: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: false
})
export class AppComponent {
  @HostListener('document:dsDocumentEditorLoaded')
  onDsDocumentEditorLoaded() {
    // TXTextControl exists from now on
    TXTextControl.addEventListener('ribbonTabsLoaded', () => {
      console.log('The ribbon tabs have been loaded.');
    });
  }
}

From then on, your code works with the TXTextControl object of the Document Editor's JavaScript API.

tx-ds-document-viewer

showThumbnailPane is an input of the component that the README doesn't list.

DocumentLoadSettings

SignatureSettings

A SignatureBox has a name, signingRequired, which is true by default, and a style: "Signature", the default, or "Initials".

<tx-ds-document-viewer
  width="1000px"
  height="800px"
  serviceURL="https://ds.example.com"
  oauthClientID="<client ID>"
  oauthClientSecret="<client secret>"
  documentData="SGVsbG8gdGhlcmU="
  [signatureSettings]="{
    showSignatureBar: true,
    ownerName: 'Paul',
    signerName: 'Jacob',
    signerInitials: 'JK',
    redirectUrlAfterSignature: 'https://your.app/signed',
    signatureBoxes: [{ name: 'txsign', signingRequired: true, style: 'Signature' }]
  }">
</tx-ds-document-viewer>

The dsDocumentViewerLoaded Event

The viewer loads its script from DS Server as well. When it has initialized the viewer, the component raises dsDocumentViewerLoaded on the document object. Handle it with @HostListener('document:dsDocumentViewerLoaded'), as for the editor, and work with the TXDocumentViewer object from then on.

How the Components Authorize

With oauthClientID and oauthClientSecret, the components request their token from DS Server with the client credentials grant type, which the security profile must allow, and the credentials are visible in the page. To keep them on the server, request the token there and bind it to accessToken; the blog article DS Server: Authorizing Angular Client Components shows an ASP.NET Core endpoint that does it. Overview compares the options.

Related Pages

• Overview: how the client libraries connect to DS Server.
• React: the same components for React.
• JavaScript API: the TXTextControl and TXDocumentViewer objects.
• Creating Security Profiles: the client ID and secret the components need.