Angular

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.
• Node.js and npm.
• The Angular CLI 19. To install it globally, open a command prompt and run:

npm install -g @angular/cli@19

The Angular steps were written with Angular CLI 19.0 and Visual Studio Code. 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 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:

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:

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 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:

   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:

   cd my-editor-app
   

3. Install the Angular CDK with the major version of your Angular version, and then the Document Editor package:

   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:

   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.

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.

<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:

Bind boolean and array values with square brackets:

<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:

   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:

   import { Component, HostListener } from '@angular/core';
   
   declare const TXTextControl: any;
   

3. Add the following method to the AppComponent class:

   @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 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 instead of btoa.

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

The header "TX Text Control 34.0 trial version" comes from the trial packages the screenshot was taken with; see Trial and Licensed Packages.

Next Steps

• Loading and Saving Documents — load documents into the editor and save them to your backend.
• JavaScript API — program the document in the editor from JavaScript.
• WebSocket Security — protect the WebSocket connection between the editor and the backend.
• Angular Integration Guide — go further with the Angular component in your application.