For Angular applications, DS Server provides 2 different npm packages:
The following prerequisites must be fulfilled to use the DS Server Angular npm packages.
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:
The following Angular versions are supported:
8.0.0
9.0.0
10.0.0
11.0.0
This library offers a HTML5 based document editor to create and modify MS Word documents browser including Google Chrome, Firefox, Safari and Edge.
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>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>| 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. |
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:
This library provides a document viewer to render documents in any browser including Google Chrome, Firefox, Safari and Edge.
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>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>| 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. |
<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. |
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: