# Creating an Angular Document Editor Application > The @txtextcontrol/tx-ng-document-editor package integrates the TX Text Control HTML5 editor into Angular via Angular CLI. A WebSocket server handles WYSIWYG synchronization. This tutorial covers ng add installation, app.component.html configuration, and connecting to a WebSocket server. > **Note:** This article is outdated and may no longer be accurate. - **Author:** Bjoern Meyer - **Published:** 2020-01-01 - **Modified:** 2026-03-05 - **Description:** The @txtextcontrol/tx-ng-document-editor package integrates the TX Text Control HTML5 editor into Angular via Angular CLI. A WebSocket server handles WYSIWYG synchronization. This tutorial covers ng add installation, app.component.html configuration, and connecting to a WebSocket server. - **4 min read** (607 words) - **Tags:** - Angular - ASP.NET - Tutorial - **Web URL:** https://www.textcontrol.com/blog/2020/01/01/creating-an-angular-document-editor-application/ - **LLMs URL:** https://www.textcontrol.com/blog/2020/01/01/creating-an-angular-document-editor-application/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/01/01/creating-an-angular-document-editor-application/llms-full.txt --- > **Updated Article Available** > > This article is outdated and there is an updated article available. > > [Getting Started: Document Editor with Angular CLI ](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms-full.txt) TX Text Control for Angular is used to integrate the TX Text Control HTML5-based document editor in Angular applications. In addition to this project, a *WebSocket Server* project is required and can be created using ASP.NET MVC or Node.js ([TX Text Control .NET Server](https://www.textcontrol.com/product/tx-text-control-dotnet-server/) is required for the backend processing). This tutorial uses a hosted *WebSocket Server* project that can be used for evaluation purposes. ### Creating your First Angular Application This tutorial shows how to create your first Angular application using the TX Text Control document editor. #### Prerequisites 1. Create your free trial access token here: [Create Access Token](https://www.textcontrol.com/product/client-package/token/) 2. Install [Node.js®](https://nodejs.org/en/download/) and npm, if not done before. 3. Open a Command Prompt and install the [Angular CLI](https://github.com/angular/angular-cli) globally by typing in the following command: ``` npm install -g @angular/cli ``` This tutorial uses Visual Studio Code that can be [downloaded](https://code.visualstudio.com/) for free. #### Creating the Angular Project 1. Open a Command Prompt and create a new project and default app by typing in the following command: ``` ng new my-editor-app ``` Follow the questions in the command prompt by answering them with "y" to add Angular routing and *Enter* to confirm *CSS* as your preferred stylesheet format. 2. Change into the created folder by typing in the following command: ``` cd my-editor-app ``` 3. Install the TX Text Control document editor package by typing in the following command: ``` ng add @txtextcontrol/tx-ng-document-editor ``` 4. Open this folder in Visual Studio Code by typing in the following command: ``` code . ``` 5. In Visual Studio Code, open the file *src -> app -> app.component.html*, add the following code and save it: ``` ``` ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2020/01/01/d/assets/code_2.webp "Creating the application") 6. Back in the command prompt, start the Angular application by typing in the following command: ``` ng serve --open ``` Your default browser is opened with your created Angular app: ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2020/01/01/d/assets/screenshot-app.webp "Creating the application") --- ### Additional Steps This tutorial uses a demo server backend for the required synchronization service that synchronizes the document in order to provide the WYSIWYG rendering - a unique feature of TX Text Control to edit documents pixel-perfect across devices and browsers. #### Creating your own WebSocket Server To learn how to create your own WebSocket server project, please have a look at this tutorial: [Creating a WebSocket Server Project with Node.js](https://www.textcontrol.com/blog/2020/01/01/creating-a-websocket-server-project-with-nodejs/llms-full.txt) #### Attribute Documentation All available attributes for the Angular element are documented in the NPM package overview page: [TX Text Control HTML5 Document Editor (Angular version)](https://www.npmjs.com/package/@txtextcontrol/tx-ng-document-editor) #### Using the JavaScript API In order to program the Angular Document Editor, a JavaScript API is available. This API is compatible to all supported platforms including ASP.NET MVC, WebForms and Node.js. The API documentation can be found here: [JavaScript API](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.javascript.api.htm) This article shows how to integrate the JavaScript API into Angular's TypeScript structure: [Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2019/10/10/loading-and-saving-documents-using-angular/llms-full.txt) #### Deploying your Angular Application To learn how to deploy this project with your own *WebSocket Server*, please have a look at this article: [Deploying the Angular Document Editor](https://www.textcontrol.com/blog/2019/11/11/deploying-the-angular-document-editor/llms-full.txt) --- ## 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) --- ## Related Posts - [Integrate Document Editing into any HTML Client using the HTML Widget](https://www.textcontrol.com/blog/2020/01/01/integrate-document-editing/llms.txt) - [Creating a WebSocket Server Project with Node.js](https://www.textcontrol.com/blog/2020/01/01/creating-a-websocket-server-project-with-nodejs/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt) - [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt) - [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt) - [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt) - [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt) - [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt) - [Back in the Pocono Mountains: Meet Text Control at TechBash 2024](https://www.textcontrol.com/blog/2024/09/24/back-in-the-pocono-mountains-meet-text-control-at-techbash-2024/llms.txt) - [Back from Copenhagen Developers Festival 2024](https://www.textcontrol.com/blog/2024/09/05/back-from-copenhagen-developers-festival-2024/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) - [Video Tutorial: Creating a MailMerge Template and JSON Data Structure](https://www.textcontrol.com/blog/2024/08/16/video-tutorial-creating-a-mailmerge-template-and-json-data-structure/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) - [Mail Merge: The Pre-Shaped Data Concept Explained](https://www.textcontrol.com/blog/2024/05/30/mail-merge-the-pre-shaped-data-concept-explained/llms.txt) - [Meet Text Control at NDC Oslo 2024](https://www.textcontrol.com/blog/2024/05/28/meet-text-control-at-ndc-oslo-2024/llms.txt) - [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt) - [Comments JavaScript API: Useful Tips and Tricks](https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms.txt) - [Integrating Document Lifecycle Management with ASP.NET Core and C#](https://www.textcontrol.com/blog/2024/03/29/integrating-document-lifecycle-management-with-asp-net-core-and-c-sharp/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) - [Customizing Electronic Signature Fonts for Typed Signatures in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/11/customizing-electronic-signature-fonts-for-typed-signatures-in-angular-and-asp-net-core/llms.txt) - [View and Edit MS Word DOCX Documents in Angular](https://www.textcontrol.com/blog/2023/10/26/view-and-edit-ms-word-docx-documents-in-angular/llms.txt) - [How to Mail Merge MS Word DOCX Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/16/how-to-mail-merge-ms-word-docx-documents-in-aspnet-core-csharp/llms.txt) - [Impressions from Web Developer Conference WDC 2023 in Hamburg, Germany](https://www.textcontrol.com/blog/2023/09/21/impressions-from-web-developer-conference-wdc-2023-in-hamburg-germany/llms.txt) - [Meet Text Control at BASTA! 2023 in Mainz, Germany](https://www.textcontrol.com/blog/2023/09/08/meet-text-control-at-basta-2023-in-mainz-germany/llms.txt)