# Angular API

> Attributes, types and defaults of the tx-document-editor and tx-document-viewer Angular components, their settings objects and the txDocumentEditorLoaded event.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > API Reference > Angular API
- **2841 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/angular-api/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/angular-api/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/angular-api/llms-full.txt

---

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](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-api/llms-full.txt) 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms-full.txt) 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:

```html
<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](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/editmode-property/llms-full.txt), 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/init-method/llms-full.txt) 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/addeventlistener-method/llms-full.txt) before you change the document. [Program the Editor From TypeScript](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/angular/#program-the-editor-from-typescript) in the Integration Guide shows the code, and [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/events/llms-full.txt) 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/architecture/llms-full.txt).

### 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/file-formats/llms-full.txt) 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/signaturesettings/llms-full.txt) class of the ASP.NET Core HTML helper, where the reference describes them in detail. [Digital Signatures](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/digital-signatures/llms-full.txt) 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](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/txdocumentviewer/llms-full.txt) object is ready. Handle it with `@HostListener('window:documentViewerLoaded')` and declare the object with `declare const TXDocumentViewer: any;`, as [Document Viewer with Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/llms-full.txt) does.

### Related Pages

- [Getting Started: Document Editor with Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt): the first Angular application with the editor and its backend.
- [Getting Started: Document Viewer with Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/llms-full.txt): the viewer in an Angular application.
- [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/angular/llms-full.txt): the Integration Guide for Angular applications.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/javascript-api/llms-full.txt): how the `TXTextControl` object works, with callbacks and promises.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/javascript-api/llms-full.txt): the `TXDocumentViewer` object of the Document Viewer.

---

## Nearby

- **Previous:** [Javascript: ZoomChangedEventArgs.newValue Property](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/zoomchangedeventargs/newvalue-property/llms-full.txt)
- **Next:** [React API](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/react-api/llms-full.txt)