Angular API
Two npm packages wrap the Document Editor and the Document Viewer in Angular components: tx-document-editor and tx-document-viewer. Every attribute the components accept is listed below with its type, its default value and what it does, together with the settings objects of the viewer and the event that tells your code when the editor's JavaScript object exists. The values come from the README and the type declarations published with the packages.
The components only create the editor or the viewer in the page. Everything your code does with the document afterward goes through the JavaScript objects TXTextControl and TXDocumentViewer, which JavaScript API introduces.
Packages
| Package | Version | Module | Component | @angular/core |
|---|---|---|---|---|
@txtextcontrol/tx-ng-document-editor | 34.0.0 | DocumentEditorModule | tx-document-editor | >=18.2.14 <=21.*.* |
@txtextcontrol/tx-ng-document-viewer | 34.0.1 | DocumentViewerModule | tx-document-viewer | >=15.1.3 <=21.*.* |
Both components are declared in their module, not as standalone components: import DocumentEditorModule or DocumentViewerModule into the root module or into the imports of a standalone component. The packages export the module and the component class only. The settings objects of the viewer are passed as plain object literals. Angular in the Installation Guide covers installation, @angular/cdk and peer dependency conflicts.
In a template, write string values as plain attributes and bind Boolean values, numbers, arrays and objects with square brackets:
<tx-document-editor
width="1000px"
height="600px"
webSocketURL="wss://localhost:7118/api/TXWebSocket"
editMode="ReadAndSelect"
[controlChars]="true"
[userNames]="['user1', 'user2']">
</tx-document-editor>
tx-document-editor
width, height and webSocketURL are required. Without webSocketURL, the component throws the error "Please provide a WebSocket URL." when it is initialized.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | none | The width of the component with its unit, such as "1000px" |
height | string | none | The height of the component with its unit, such as "800px" |
webSocketURL | string | none | The WebSocket URL of the backend, with protocol, port and path, such as wss://localhost:7118/api/TXWebSocket |
editMode | string | "Edit" | Whether the text can be edited, only selected or only read: "Edit", "ReadAndSelect", "ReadOnly" or "UsePassword" |
contextMenusEnabled | boolean | true | Whether a right-click opens a context menu |
saveDocumentQuestionDialogEnabled | boolean | true | Whether users confirm before unsaved changes are discarded |
documentTargetMarkers | boolean | true | Whether markers for hypertext targets are shown |
tableGridLines | boolean | true | Whether table grid lines are shown |
textFrameMarkerLines | boolean | true | Whether text frames without a border line are shown with marker lines |
controlChars | boolean | false | Whether control characters are shown |
textFieldsEditable | boolean | false | Whether text fields can be edited |
backColor | string | "#ffffff" | The background color of the text area and the rulers, as a hex string (#RRGGBB or #RGB) |
statusBarColor | string | "#2b569a" | The background color of the status bar, as a hex string |
culture | string | "" | The culture for formatting, such as dates and times, for example "de-DE" |
uiCulture | string | "" | The culture of the user interface strings, for example "en-US" |
userNames | string[] | [] | The users who can edit the editable regions assigned to them when the document is read-only |
formattingPrinter | string | "" | The name of a printer whose text dimensions are used to format the document |
reconnectTimeout | number | 0 | The time in seconds after which the editor stops trying to reconnect when the connection is lost |
Most attributes correspond to a property of the TXTextControl object, such as editMode, which your code can also change at run time.
The txDocumentEditorLoaded Event
The component loads the editor script from the backend at run time, so the global TXTextControl object doesn't exist when your component is created. When the script has loaded, the component calls TXTextControl.init and then raises the event txDocumentEditorLoaded on the document object. Handle it with @HostListener('document:txDocumentEditorLoaded') in the component that contains the editor.
The TXTextControl object exists from this event on, but the document isn't ready yet: attach a handler to the editor's textControlLoaded event with addEventListener before you change the document. Program the Editor From TypeScript in the Integration Guide shows the code, and Events lists the order of the events during initialization.
How the Editor Script Is Loaded
The component requests the editor script from the address in webSocketURL, with the ws or wss protocol replaced by http or https and /GetResource?name=tx-document-editor.min.js appended to the path. A query string in webSocketURL, such as an access token, is added to this request as well. The backend that serves the script is described in Architecture.
tx-document-viewer
width, height and basePath are required.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | none | The width of the component with its unit, such as "1000px" |
height | string | none | The height of the component with its unit, such as "800px" |
basePath | string | none | The URL of the backend that hosts the Document Viewer, such as https://localhost:7275 |
documentData | string | "" | The document to show, as a Base64 string; the README names HTML, RTF, DOC, DOCX, PDF and TX. DOC requires a backend with the Classic engine and the TXTextControl.Web.DocumentViewer.Classic package, as File Formats explains |
documentPath | string | "" | The name of the document that the viewer shows |
documentLoadSettings | DocumentLoadSettings | see below | Settings for loading the document |
dock | string | "Fill" | How the viewer is docked: "Fill" or "Window" |
toolbarDocked | boolean | true | Whether the toolbar is docked or floating |
isSelectionActivated | boolean | true | Whether users can select and copy text |
showThumbnailPane | boolean | false | Whether the sidebar with page thumbnails is shown |
signatureSettings | SignatureSettings | see below | The settings of the signature process |
userNames | string[] | [] | An array of user names; the README describes them as the users who can sign the document |
resources | object | none | Replacements for the strings the viewer displays, as key-value pairs |
The component passes basePath to the viewer without its query string. A query string in basePath is added only to the request of the viewer script, <basePath>/TextControl/GetResource?Resource=minimized.tx-viewer.min.js.
DocumentLoadSettings
| Property | Type | Default | Description |
|---|---|---|---|
loadEmbeddedComments | boolean | true | Whether comments in the document are loaded as annotations |
pdfjs | object | workerSourcePath and librarySourcePath: the paths of the PDF.js worker and library |
SignatureSettings
| Property | Type | Default | Description |
|---|---|---|---|
showSignatureBar | boolean | false | Whether the signature bar is shown |
ownerName | string | "" | The name of the owner who requests the signature |
signerName | string | "" | The name of the signer |
signerInitials | string | "" | The initials of the signer |
signatureBoxName | string | "txsign" | The name of the signature box in the document |
signatureBoxes | object[] | none | Several signature boxes, each with name, signingRequired and style (0 for a signature, 1 for initials) |
uniqueId | string | "" | A unique string that is rendered on the signed document and can serve as its envelope ID when you store it |
redirectUrlAfterSignature | string | "" | The URL of an endpoint to which the viewer's controller posts the signature data after a successful signature |
defaultSignatureFont | object | none | family: the default font of signatures that users type |
These properties correspond to the SignatureSettings class of the ASP.NET Core HTML helper, where the reference describes them in detail. Digital Signatures shows the signature process from start to end.
Use the Viewer From TypeScript
The viewer raises the documentViewerLoaded event on the window object when the TXDocumentViewer object is ready. Handle it with @HostListener('window:documentViewerLoaded') and declare the object with declare const TXDocumentViewer: any;, as Document Viewer with Angular does.