Angular

For Angular applications, DS Server provides 2 different npm packages:

Prerequisites

The following prerequisites must be fulfilled to use the DS Server Angular npm packages.

Security Profiles

In order to use the DS Server Angular npm packages, a running DS Server with valid security profiles is required. Learn how to setup the security profiles in this chapter:

Creating Security Profiles

Angular Version

The following Angular versions are supported:

  • 8.0.0

  • 9.0.0

  • 10.0.0

  • 11.0.0

DocumentEditor

This library offers a HTML5 based document editor to create and modify MS Word documents browser including Google Chrome, Firefox, Safari and Edge.

Installation

npm i @txtextcontrol/tx-ng-ds-document-editor

Usage

Your component.html could look like this, for example (the only mandatory attributes are width, height, serviceURL, oauthClientID and oauthClientSecret):

<tx-ds-document-editor
    width="1000px"
    height="500px"
    serviceURL="https://yourdomain.com/DocumentServices"
    oauthClientID="dsserver.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    oauthClientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8">
</tx-ds-document-editor>

Trial Token

If you are evaluating DS Server and you are using a trial token, replace the ServiceUrl with the demo server location https://trial.dsserver.io.


<tx-ds-document-editor
    width="1000px"
    height="500px"
    serviceURL="https://trial.dsserver.io"
    oauthClientID="dsserver.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    oauthClientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8">
</tx-ds-document-editor>

Available Properties

Property Value Type Description
width string Specifies the width of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
height string Specifies the height of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
serviceURL string The server which is hosting your installation of Text Control DS Server.
oauthClientID string Sets the OAuth client ID.
oauthClientSecret string Sets the OAuth client secret.
editMode string Sets whether the document's text is read-only, can be selected or is editable. Possible values are "Edit", "ReadAndSelect", "ReadOnly" and "UsePassword".
formattingPrinter string The name of a printer the text dimensions and capabilities of which are used to format the document.
contextMenusEnabled bool Sets whether a right click opens a context menu or not.
documentData string Base64 encoded document data.
documentFileFormat string The file format of the document data. Possible values are 'HTML', 'RTF', 'TXT', 'TX', 'DOC', 'PDF', 'DOCX' and 'XLSX'.
jsonData string The data source for the reporting tab.
culture string The culture (e. g. 'en-US'). Affects date and time string formats, for example.
uiCulture string The user interface culture (e. g. 'en-US'). Affects the string resource language.
userNames string[] An array of names specifying users who have access to editable regions. When a document is set to read-only all editable regions that are related to these users can be edited.
reconnectTimeout int Time in seconds before stopping reconnection attempts after a connection loss.

API Reference

The DocumentEditor provides a fully-featured JavaScript API that gives access to all document elements to manipulate documents programmatically. The JavaScript API is separately explained in the Reference Guide:

JavaScript API - TXTextControl Object

DocumentViewer

This library provides a document viewer to render documents in any browser including Google Chrome, Firefox, Safari and Edge.

Installation

npm i @txtextcontrol/tx-ng-ds-document-viewer

Usage

Your component.html could look like this, for example (the only mandatory attributes are width, height, serviceURL, oauthClientID and oauthClientSecret):

<tx-ds-document-viewer
    width="1000px"
    height="500px"
    serviceURL="https://yourdomain.com/DocumentServices"
    oauthClientID="txtextcontrol.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    oauthClientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"
    documentData="SGVsbG8gdGhlcmU=">
</tx-ds-document-viewer>

Trial Token

If you are evaluating DS Server and you are using a trial token, replace the ServiceUrl with the demo server location https://trial.dsserver.io.


<tx-ds-document-viewer
    width="1000px"
    height="500px"
    serviceURL="https://trial.dsserver.io"
    oauthClientID="txtextcontrol.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    oauthClientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"
    documentData="SGVsbG8gdGhlcmU=">
</tx-ds-document-viewer>

Available Properties

Property Value Type Description
width string Specifies the width of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
height string Specifies the height of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
serviceURL string The service URL.
oauthClientID string Sets the OAuth client ID.
oauthClientSecret string Sets the OAuth client secret.
toolbarDocked bool Specifies whether the toolbar is docked or floating.
documentPath string Specifies the displayed document name.
documentData string Sets the document data encoded as a Base64 string. Supported formats are HTML, RTF, DOC, DOCX, PDF and TX.
isSelectionActivated bool Specifies whether text can be selected and copied.
signatureSettings SignatureSettings Specifies the signature settings.
showThumbnailPane bool Specifies whether the thumbnail sidebar is visible or not.
dock string Specifies how the control is docked. Possible values are "Fill" and "Window".
resources string[][] Specifies resources for the displayed strings.

Custom Objects

SignatureSettings Object

<tx-document-viewer
    width = "800px"
    height = "800px"
    serviceURL="https://yourdomain.com/DocumentServices"
    oauthClientID="txtextcontrol.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    oauthClientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"
    [signatureSettings] = "{
        showSignatureBar: true,
        signatureBoxName: 'txsign',
        redirectUrlAfterSignature: 'https://www.textcontrol.com',
        ownerName: 'Paul', signerName: 'Jacob',
        signerInitials: 'PK' }">
</tx-document-viewer>
Property Value Type Description
ownerName string Specifies the name of the document owner.
signatureBoxName string Specifies the name of the signature boxes to sign.
signerName string Specifies the name of the signer.
signerInitials string Specifies the initials of the signer.
showSignatureBar bool Specifies whether the signature bar is active or not.
uniqueId string Gets or sets a unique document envelope Id.
redirectUrlAfterSignature string Gets or sets an Url that is used for redirection after a successful signing process.

API Reference

The DocumentEditor provides a fully-featured JavaScript API that gives access to all document elements to manipulate documents programmatically. The JavaScript API is separately explained in the Reference Guide:

JavaScript API - TXTextControl Object