# Angular

> Create an ASP.NET Core backend and an Angular CLI app that shows the Document Editor with the tx-document-editor component, then run both together.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Getting Started > Document Editor > Angular
- **3195 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt

---

An Angular application shows the Document Editor with the `tx-document-editor` component, and an ASP.NET Core project hosts the Document Editor backend for it. You create both projects and, at the end, load a document with the JavaScript API as soon as the editor is ready.

### Prerequisites

- Visual Studio 2026 with the .NET 10 SDK for the backend. The engine and backend packages require .NET 8 or higher.
- A TX Text Control .NET Server license with a serial number assigned to your email address, and access to the [Text Control Private NuGet Feed](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/nuget/private-feed/llms-full.txt).
- [Node.js](https://nodejs.org/en/download/) and npm.
- The Angular CLI 19. To install it globally, open a command prompt and run:

```bash
npm install -g @angular/cli@19
```

The Angular steps were written with Angular CLI 19.0 and [Visual Studio Code](https://code.visualstudio.com/). The package supports Angular versions up to 21. The latest Angular CLI creates applications with a newer Angular version and different file names, so install version 19 to follow the steps.

### How the Projects Work Together

The Angular component only contains the user interface of the editor. It opens a WebSocket connection to your ASP.NET Core backend, which runs the Document Editor backend and synchronizes the document. The component's `webSocketURL` attribute contains the address of that connection.

### Evaluate Without a Backend of Your Own

Text Control hosts a trial backend at `backend.textcontrol.com` for evaluating the Angular component. It needs a personal trial access token, which you create on the [trial access token page](https://www.textcontrol.com/products/javascript/angular/access-token/) after signing in with a Text Control account. The token is valid for 30 days.

To use it, skip the backend steps below and set `webSocketURL` to `wss://backend.textcontrol.com/TXWebSocket?access-token=yourtoken`, with your token in place of `yourtoken`. For development and deployment, you host your own backend as described next.

### Create the Backend

#### Create the Project

1. In Visual Studio 2026, choose **Create a new project**.
2. Select **ASP.NET Core Web API** as the project template and confirm with **Next**.
3. Enter a project name, choose a location and confirm with **Next**.
4. Choose **.NET 10.0 (Long Term Support)** as the **Framework**, check **Use controllers** and create the project.

#### Install the NuGet Packages

1. In **Solution Explorer**, select your project and choose **Manage NuGet Packages...** from the **Project** menu.
2. Select your private NuGet feed (**TextControl**) as the package source.
3. Install `TXTextControl.Web`, `TXTextControl.TextControl.Core.SDK` and `TXTextControl.Web.DocumentEditor.Backend`.

Alternatively, run the following commands in the project folder:

```bash
dotnet add package TXTextControl.Web
dotnet add package TXTextControl.TextControl.Core.SDK
dotnet add package TXTextControl.Web.DocumentEditor.Backend
```

#### Configure Program.cs

Open *Program.cs* and replace its content with the following code:

```csharp
using TXTextControl.Web;
using TXTextControl.Web.DocumentEditor.Backend;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllers();

// start the Document Editor backend together with the application
builder.Services.AddHostedService<DocumentEditorWorkerManager>();

var app = builder.Build();

// Configure the HTTP request pipeline.
app.UseHttpsRedirection();

// enable WebSockets
app.UseWebSockets();

// attach the TX Text Control WebSocket middleware
app.UseTXWebSocketMiddleware();

app.UseAuthorization();

app.MapControllers();

app.Run();
```

The added lines start the Document Editor backend with the application, enable WebSockets and attach the TX Text Control WebSocket middleware, as [Configure Program.cs](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/#configure-program-cs) in the ASP.NET Core tutorial explains. The middleware also serves the editor script at `/api/TXWebSocket/GetResource`.

The Document Editor needs no CORS policy. You can remove the sample weather forecast controller of the template.

#### Run the Backend

1. Press **F5** to start the backend.
2. Open *Properties/launchSettings.json* and note the HTTPS address of the project, for example `https://localhost:7118`.

The WebSocket URL for the Angular component is this address with the `wss` protocol and the path `/api/TXWebSocket`, for example `wss://localhost:7118/api/TXWebSocket`. Use `wss` when the backend runs on HTTPS and `ws` when it runs on HTTP.

### Create the Angular Application

1. Open a command prompt and create a new project with a root module:

    ```bash
    ng new my-editor-app --no-standalone
    ```

    Select **CSS** as the stylesheet format and answer **N** to disable server-side rendering and static site generation.
2. Change to the project folder:

    ```bash
    cd my-editor-app
    ```
3. Install the Angular CDK with the major version of your Angular version, and then the Document Editor package:

    ```bash
    npm i @angular/cdk@19
    npm i @txtextcontrol/tx-ng-document-editor
    ```

    The Document Editor package depends on `@angular/cdk`. If the application doesn't contain it yet, npm adds a separate copy of `@angular/cdk` 21, which requires Angular 21.
4. Open the folder in Visual Studio Code:

    ```bash
    code .
    ```

### Add the Document Editor Module

Open *src/app/app.module.ts*, replace its complete content with the following code and save the file. The code adds `DocumentEditorModule`, which provides the `tx-document-editor` component, to the module's imports.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DocumentEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

If your application uses standalone components instead of a root module, add `DocumentEditorModule` to the `imports` array of the component that shows the editor.

### Add the Editor Component

Open *src/app/app.component.html*, replace its complete content with the following code and save the file. Replace the port `7118` with the HTTPS port of your backend.

```html
<tx-document-editor
  width="1000px"
  height="500px"
  webSocketURL="wss://localhost:7118/api/TXWebSocket">
</tx-document-editor>
```

`width`, `height` and `webSocketURL` are mandatory. The component supports more attributes, for example:

| Attribute | Type | Description |
|---|---|---|
| `width` | string | The width of the component, for example `"1000px"`. |
| `height` | string | The height of the component, for example `"800px"`. |
| `webSocketURL` | string | The WebSocket URL of your backend. |
| `editMode` | string | Whether the text is editable, selectable or read-only: `'Edit'`, `'ReadAndSelect'`, `'ReadOnly'` or `'UsePassword'`. |
| `userNames` | string\[\] | The names of users who have access to editable regions. |
| `culture` | string | The culture that formats values such as date and time strings, for example `'de-DE'`. |
| `uiCulture` | string | The user interface culture that selects the language of the string resources, for example `'en-US'`. |
| `contextMenusEnabled` | boolean | Whether a right-click opens a context menu. |
| `controlChars` | boolean | Whether control characters are visible. |
| `statusBarColor` | string | The background color of the status bar as a CSS hex string. |
| `reconnectTimeout` | number | The time in seconds before reconnection attempts stop after a connection loss. |

Bind boolean and array values with square brackets:

```html
<tx-document-editor
   width="1000px"
   height="800px"
   webSocketURL="wss://localhost:7118/api/TXWebSocket"
   statusBarColor="#FF00FF"
   [controlChars]="true"
   [userNames]="['Tim Typer']">
</tx-document-editor>
```

### Run the Application

1. Make sure the backend is running in Visual Studio.
2. In the command prompt, start the Angular application:

    ```bash
    ng serve --open
    ```

Your default browser opens the application and shows the Document Editor with its ribbon bar.

### Load a Document With the JavaScript API

The component loads the script that contains the global `TXTextControl` object in a deferred manner. As soon as the object is available, the component fires the `txDocumentEditorLoaded` event on the `document` object. Listen for this event, then wait for the editor's `textControlLoaded` event before you call the API.

1. Open *src/app/app.component.ts*.
2. Add `HostListener` to the import from `@angular/core`, and declare the global `TXTextControl` object below the imports:

    ```typescript
    import { Component, HostListener } from '@angular/core';

    declare const TXTextControl: any;
    ```
3. Add the following method to the `AppComponent` class:

    ```typescript
    @HostListener('document:txDocumentEditorLoaded')
    onTxDocumentEditorLoaded() {
      // wait until the editor is ready
      TXTextControl.addEventListener("textControlLoaded", () => {
        TXTextControl.loadDocument(
          TXTextControl.StreamType.HTMLFormat,
          btoa("<p>Welcome to <strong>Text Control</strong></p>"));
      });
    }
    ```

After the application reloads, the editor shows the welcome text. [`loadDocument`](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/loaddocument-method/llms-full.txt) replaces the content of the editor and expects the document as a base64-encoded string. For text with characters outside the Latin-1 range, encode it with [`TXTextControl.btoaUTF8`](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/btoautf8-method/llms-full.txt) instead of `btoa`.

The editor fills the 1000 by 500 pixels that the `width` and `height` attributes give it:

![The Angular application in the browser: the tx-document-editor component with the Home tab of the ribbon, a page with the header "TX Text Control 34.0 trial version" and the loaded text "Welcome to Text Control", and the status bar.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/angular-editor-result.d36fd5be.webp)

The header "TX Text Control 34.0 trial version" comes from the trial packages the screenshot was taken with; see [Trial and Licensed Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/licensing/development/#trial-and-licensed-packages).

### Next Steps

- [Loading and Saving Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/load-save/llms-full.txt) — load documents into the editor and save them to your backend.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/javascript-api/llms-full.txt) — program the document in the editor from JavaScript.
- [WebSocket Security](https://docs.textcontrol.com/tx-text-control-dotnet-server/security/websockets/llms-full.txt) — protect the WebSocket connection between the editor and the backend.
- [Angular Integration Guide](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/angular/llms-full.txt) — go further with the Angular component in your application.

---

## Nearby

- **Previous:** [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt)
- **Next:** [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt)