We recently published the final release version of our Node.js and Angular implementations that enables developers to use the TX Text Control HTML5-based document editor in pure Angular and Node.js applications.

This tutorial shows how to use the JavaScript API to load and save documents within an Angular application.

1. Create a basic Angular application as described in this tutorial:
   Creating your First Angular Application

2. Create a folder named js in the folder src/assets/ and create a new JavaScript file named custom.js.

   function saveDocument() {
       TXTextControl.saveDocument(TXTextControl.StreamType.HTMLFormat,
           function (e) {
               alert(atob(e.data));
           });
   }
   
   function loadDocument() {
       TXTextControl.loadDocument(TXTextControl.StreamType.HTMLFormat,
           btoa('<strong>Test</strong>'));
   }

3. And add this JavaScript file to the scripts array of the projects architect/build/options element in the angular.json file:

   "scripts": [
     "src/assets/js/custom.js"
   ]

4. Add the declaration and the methods onClickSave and onClickLoad to the app.component.ts TypeScript file, so that the complete file looks like this:

   import { Component } from '@angular/core';
   declare const saveDocument: any;
   declare const loadDocument: any;
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'my-editor-app';
   
     onClickSave() {
       saveDocument();
     }
   
     onClickLoad() {
       loadDocument();
     }
   
   }

5. Finally, add two buttons to the app.component.html with the Angular click handlers:

   <tx-document-editor width="1024" height="800" port="8080"></tx-document-editor>
   
   <div>
     <button (click)="onClickLoad()" class="btn btn-primary">Load Document</button>
     <button (click)="onClickSave()" class="btn btn-primary">Save Document</button>
   </div>

When executing the application, an HTML document is loaded into the editor and the save button alerts the resulting HTML from the saveDocument method.