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
-
Create a basic Angular application as described in this tutorial:
Getting Started: Document Editor with Angular CLI -
Create a folder named js in the folder src/assets/ and create a new JavaScript file named custom.js.
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.
-
-
Add this JavaScript file to the scripts array of the projects architect/build/options element in the angular.json file:
-
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.
-
Finally, add three buttons to the app.component.html with the Angular click handlers:
After compiling and starting the application, the added buttons can be used to manipulate the document programmatically.
