# Getting Started: Angular Document Editor Attributes Explained > This article explains the possible attributes that can be used when initializing the TX Text Control Document Editor for Angular. - **Author:** Bjoern Meyer - **Published:** 2023-02-01 - **Modified:** 2026-07-17 - **Description:** This article explains the possible attributes that can be used when initializing the TX Text Control Document Editor for Angular. - **3 min read** (482 words) - **Tags:** - Angular - JavaScript - Reporting - **Web URL:** https://www.textcontrol.com/blog/2023/02/01/getting-started-angular-document-editor-attributes-explained/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/02/01/getting-started-angular-document-editor-attributes-explained/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/02/01/getting-started-angular-document-editor-attributes-explained/llms-full.txt --- In a [previous tutorial](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms-full.txt), you learned how to create your first Angular application using the TX Text Control Document Editor. This tutorial shows how and when to use the various attributes when adding a Document Editor to your *app.component.html*. ### Attributes After adding the document editor to the *app.component.html*, your code looks similar to this: ``` ``` Most settings can be set using the [JavaScript API](https://www.textcontrol.com/blog/2023/01/30/getting-started-programming-the-angular-document-editor-using-javascript/llms-full.txt), but some must be and some can be adjusted during the initialization of the document editor. The only mandatory attributes are *width*, *height* and *webSocketURL*. Other attributes are optional and are used to define the style, the edit mode or to define user names for track changes and document protection modes. #### Attributes Usage All string based attributes must be provided in the following way: ``` attribute_name="attribute_value" ``` All other types including booleans, numbers and string arrays are provided with a square bracket in the following format: ``` [attribute_name]="attributevalue" [attribute_name]=attributevalue [attribute_name]="['attributevalue', 'attributevalue']" ``` #### Available Attributes The following table lists all available attributes including the value type and the description. | Key | Value Type | Value description | |---|---|---| | width | string | The width of the component (e.g. "1000px"). | | height | string | The height of the component (e.g. "800px"). | | webSocketURL | string | A valid URL that points to your used backend. | | documentTargetMarkers | boolean | Sets whether markers for hypertext targets are shown in the editor. | | backColor | string | Determines the background color of the main text area and the ruler bars as a CSS hex string (e. g. "#FF00FF") | | statusBarColor | string | Determines the background color of the status bar as a CSS hex string. | | 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* | | contextMenusEnabled | boolean | Sets whether a right click opens a context menu or not. | | saveDocumentQuestionDialogEnabled | boolean | Sets whether a confirmation dialog should be shown before discarding unsaved changes. | | tableGridLines | boolean | Sets whether table grid lines are shown in the editor or not. | | textFrameMarkerLines | boolean | Sets whether text frames that have no border line are shown with marker lines. | | controlChars | boolean | Sets whether control characters are visible or not. | | textFieldsEditable | boolean | Sets whether text fields are editable or not. | | formattingPrinter | string | The name of a printer the text dimensions and capabilities of which are used to format the document. | | culture | string | The culture (e.g. *de-DE*). 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 | number | Time in seconds before stopping reconnection attempts after a connection loss. | --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Series - [Getting Started: Document Editor with Angular CLI](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms.txt) - [Getting Started: Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2024/03/14/loading-and-saving-documents-using-angular/llms.txt) - [Getting Started: Programming the Angular Document Editor using JavaScript](https://www.textcontrol.com/blog/2023/01/30/getting-started-programming-the-angular-document-editor-using-javascript/llms.txt) - **Getting Started: Angular Document Editor Attributes Explained** (this article) --- ## Related Posts - [Getting Started: Programming the Angular Document Editor using JavaScript](https://www.textcontrol.com/blog/2023/01/30/getting-started-programming-the-angular-document-editor-using-javascript/llms.txt) - [Getting Started: Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2023/01/30/loading-and-saving-documents-using-angular/llms.txt) - [Impressions from Web Developer Conference (WDC) in Hamburg](https://www.textcontrol.com/blog/2019/10/16/impressions-from-web-developer-conference/llms.txt) - [Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2019/10/10/loading-and-saving-documents-using-angular/llms.txt) - [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt) - [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/llms.txt) - [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt) - [Getting Started: Document Viewer with Angular CLI v18.0](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/llms.txt) - [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt) - [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt) - [Document Viewer for Angular: SignatureSettings Explained](https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Getting Started: Document Editor with Angular CLI v17.0](https://www.textcontrol.com/blog/2023/12/13/getting-started-document-editor-with-angular-cli-17/llms.txt) - [Angular: Loading Documents from Assets Folder on Initialization](https://www.textcontrol.com/blog/2023/07/10/angular-loading-documents-from-assets-folder-on-initialization/llms.txt) - [Reuse Angular Document Editor Instances in Bootstrap Tabs](https://www.textcontrol.com/blog/2023/05/22/reuse-angular-document-editor-instances-in-bootstrap-tabs/llms.txt) - [Getting Started: Document Viewer with Angular CLI](https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/llms.txt) - [Getting Started: Document Editor with Angular CLI](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms.txt) - [Getting Started: Document Editor with Angular](https://www.textcontrol.com/blog/2022/09/08/getting-started-document-editor-with-angular/llms.txt) - [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt) - [TX Text Control Document Editor Deployment Strategies](https://www.textcontrol.com/blog/2021/08/10/document-editor-deployment-strategies/llms.txt) - [Track Changes: Show 'Original' and 'No Markup'](https://www.textcontrol.com/blog/2021/02/18/track-changes-show-original-and-no-markup/llms.txt) - [Using the Document Viewer in Angular Routes](https://www.textcontrol.com/blog/2021/01/14/using-document-viewer-in-angular-routes/llms.txt) - [Live Samples Hosted on StackBlitz](https://www.textcontrol.com/blog/2020/06/11/live-samples-hosted-on-stackblitz/llms.txt) - [JavaScript Functions for Typical Form Field Tasks](https://www.textcontrol.com/blog/2020/04/15/javascript-functions-for-typical-form-field-tasks/llms.txt) - [Using Text Control in Angular Routes](https://www.textcontrol.com/blog/2020/03/30/using-text-control-in-angular-routes/llms.txt)