When using the Angular version of the TX Text Control document editor, documents are loaded client side using the JavaScript API. If you want to load documents from a server or repository, the document needs to be loaded from client-side (for example from a service endpoint) in order to be loaded into the editor.

Open Local Documents

To show how this works, this sample loads local documents that can be opened using a file open dialog.

  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.

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

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

    Loading...
  5. Add a button and an input element to the app.component.html with the Angular click and change handlers:

    Loading...

When starting this Angular application, a file open dialog is opened to choose a local document that is then loaded into the document editor. When clicking the Save as PDF button, the document is saved and downloaded as an Adobe PDF document.

Loading local documents in Angular

Try this on your own and create your first Angular application without installing any setup. Simply by downloading the npm packages.

Creating your First Angular Application

Loading Documents on Initialization

If you want to load a document on initializing TX Text Control, please have a look at this article:

Angular: Loading Documents on Initializing TX Text Control