Angular

TX Text Control Widget

This blog post uses the TX Text Control Widget - a cross-platform HTML widget to integrate MS Word compatible document editing into any platform.

Read documentation

The HTML5 based editor available for MVC and Web Forms is an ASP.NET component that requires a Windows Server and IIS. The Widget implementation can be hosted on a separate server or easily deployed using Docker Containers and used in any platform including Angular, Node.js or .NET Core.

This beginner tutorial shows how to create a simple Angular application and how to add the widget to a component. This tutorial is based on the QuickStart tutorial documented on the official Angular website.

  1. Development Environment

    1. Install Node.js® and npm, if not done before.

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

      npm install -g @angular/cli
  2. Create a new project

    1. Open a Command Prompt and create a new project and default app by typing in the following command:

      ng new my-app
  3. Adding the widget

    1. Open src/app/app.component.css and add some CSS to the widget:

      Loading...
    2. Open src/app/app.component.html and add the widget DIV container:

      Loading...
    3. Finally, open the main HTML file src/index.html and add the widget JavaScript to the HEAD element and a global variable to access the Text Control object for demo purposes. In real-world applications, you might want to import the JavaScript and export the interface to TypeScript.

      Loading...

      In this step, if you host the widget on your own server, change the location of the script.

  4. Serve the Application

    1. Open a Command Prompt, change to the project directory and serve the application by typing in the following command:

      ng serve --open

      Your default browser will be opened with your served application.

  5. Accessing the Widget API

    1. The global variable textControl1 can now be used to access the API. The following sample JavaScript will load an HTML document into the editor:

      Loading...