The frequency of Angular releases is high compared to new major releases of .NET. Generally, a major release comes every 6 months and the average support window for major releases is 18 months. Thus, Angular version and application updates are a very typical task for Angular developers.

We have decided not to build our packages directly for the latest release in order to be compatible with a wider range of releases. Our components can be installed ignoring peer dependencies and are compatible with the latest version.

Prerequisites

There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server for ASP.NET, or by creating a trial access token to use a hosted backend, valid for 30 days:

Creating the 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

  2. Install Node.js and npm, if not done before.

  3. Open a Command Prompt and install the Angular CLI globally by typing in the following command:

    npm install -g @angular/cli

This tutorial uses Visual Studio Code that can be downloaded 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 confirming CSS as your preferred stylesheet format and 'N' to disable Server-Side Rendering and Static Site Generation.

  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:

    npm i @txtextcontrol/tx-ng-document-editor --legacy-peer-deps

  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.ts, add replace the complete content with the following code and save it:

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterOutlet } from '@angular/router';
    import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';
    @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, RouterOutlet, DocumentEditorModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
    })
    export class AppComponent {
    title = 'my-editor-app';
    }
    view raw test.ts hosted with ❤ by GitHub

  6. Open the file src -> app -> app.component.html, add replace the complete content with the following code, replace yourtoken with your given Trial Access Token and save it:

    <tx-document-editor
    width="1000px"
    height="500px"
    webSocketURL="wss://backend.textcontrol.com/TXWebSocket?access-token=yourtoken">
    </tx-document-editor>
    view raw test.html hosted with ❤ by GitHub

    Backend Server

    In the code above, a hosted demo backend server is used specified through the webSocketURL property. If you are hosting your own required backend server, replace the URL with your backend endpoint such as ws://localhost:8080/TXWebSocket.

  7. Back in the command prompt, start the Angular application by typing in the following command:

    ng serve --open

Next Steps

The following link takes you to a tutorial which shows how to use JavaScript to load documents and program the content of the document.

Programming the Angular Document Editor using JavaScript

This tutorial shows how to use the JavaScript API to manipulate the document by adding a table and inserting and modifying merge fields.

Read Tutorial