Loading and Saving Documents using Angular

We recently published the Technology Preview 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.

   

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

   

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:

   

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

   

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