Getting Started: Programming the Angular Document Editor using JavaScript

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.