In a previous tutorial, you learned how to create your first Angular application using the TX Text Control Document Editor.

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

Creating the Application

  1. Create a basic Angular application as described in this tutorial:
    Getting Started: Document Editor with Angular CLI

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

    function jsInsertTable(rows, cols, id) {
    TXTextControl.tables.add(rows, cols, id, function(e) {
    if (e === true) { // if added
    TXTextControl.tables.getItem(function(table) {
    table.cells.forEach(function(cell) {
    cell.setText("Cell text");
    });
    }, null, 10);
    }
    })
    }
    function jsAddMergeField(text, name) {
    TXTextControl.applicationFields.add(
    TXTextControl.ApplicationFieldFormat.MSWord,
    "MERGEFIELD",
    text,
    [name],
    af => {
    var highlightColor = "rgba(9, 165, 2, 0.3)";
    var highlightMode = TXTextControl.HighlightMode.Always;
    af.setHighlightColor(highlightColor);
    af.setHighlightMode(highlightMode);
    af.setDoubledInputPosition(true);
    }
    );
    }
    function jsSetMergeFieldText(text) {
    TXTextControl.applicationFields.forEach(function(appField) {
    appField.setText(text);
    });
    }
    view raw test.js hosted with ❤ by GitHub

    The functions in this JavaScript file can access the TXTextControl object and contains the actual API calls to manipulate the document. The JavaScript file contains three functions to execute the following tasks:

    • jsInsertTable
      This function inserts a new table at the current input position and fills all table cells with text.

    • jsAddMergeField
      This function adds a new merge field into the document and sets the highlight mode and color of that inserted field.

    • jsSetMergeFieldText
      This function loops through all merge fields in order to replace the text with another string.

  3. 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"
    ]
    view raw scripts.json hosted with ❤ by GitHub
  4. Add the declaration and the TypeScript methods tsInsertTable, tsAddMergeField and tsSetMergeFieldText to the app.component.ts TypeScript file. These TypeScript wrapper functions call the actual JavaScript functions from the added custom.js file.

    import { Component } from '@angular/core';
    declare const jsInsertTable: any;
    declare const jsAddMergeField: any;
    declare const jsSetMergeFieldText: any;
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    title = 'my-editor-app';
    // TypeScript wrapper function
    tsInsertTable(cols: number, rows: number, id: number) {
    // call JavaScript
    jsInsertTable(cols, rows, id);
    }
    // TypeScript wrapper function
    tsAddMergeField(name: string, text: string) {
    // call JavaScript
    jsAddMergeField(name, text);
    }
    // TypeScript wrapper function
    tsSetMergeFieldText(text: string) {
    // call JavaScript
    jsSetMergeFieldText(text);
    }
    }
    view raw app.ts hosted with ❤ by GitHub
  5. Finally, add three buttons to the app.component.html with the Angular click handlers:

    <tx-document-editor
    width="1000px"
    height="500px"
    webSocketURL="wss://backend.textcontrol.com?access-token=yourtoken">
    </tx-document-editor>
    <div>
    <button (click)="tsInsertTable(10,5,10)" class="btn btn-primary">Insert Table</button>
    <button (click)="tsAddMergeField('??company_name??','company_name')" class="btn btn-primary">Add Merge Field</button>
    <button (click)="tsSetMergeFieldText('New Text')" class="btn btn-primary">Set Merge Field Text</button>
    </div>
    view raw test.html hosted with ❤ by GitHub

After compiling and starting the application, the added buttons can be used to manipulate the document programmatically.

Loading and saving documents in Angular