Getting Started: Loading and Saving Documents using Angular

You learned how to use the TX Text Control document editor to create your first Angular application in a previous tutorial. This tutorial will show you how to use the JavaScript API to load a document from a URL and how to save a document within an Angular application.

Prerequisites

This tutorial is based on the basic Angular application created in the first step-by-step tutorial.

Learn More

This article shows how to use the TX Text Control Document Editor npm package for Angular within an Angular CLI application. This is the first course of a getting started series for Angular to learn how to use the Document Editor in Angular.

Getting Started: Document Editor with Angular CLI

Creating the Application

1. Open the Angular application created in the previous tutorial in your preferred editor such as Visual Studio Code.

2. Create a folder named js in the folder src/assets/ and create a new JavaScript file named tx.js. Paste the following into the newly created file:

   	async function saveDocument(StreamType) {
   	// save document
   	return new Promise((resolve, reject) => {
   	TXTextControl.saveDocument(StreamType, function (e) {
   	if (e) {
   	resolve(e.data);
   	} else {
   	reject('Error saving document');
   	}
   	});
   	});
   	}
   	function loadDocumentFromUrl(url) {
   	// download document using xml http request
   	var xhr = new XMLHttpRequest();
   	xhr.open('GET', url, true);
   	xhr.responseType = 'blob';
   	xhr.onload = function () {
   	if (xhr.status === 200) {
   	var blob = xhr.response;
   	var reader = new FileReader();
   	reader.onload = function () {
   	// get the base64 encoded string
   	var base64 = reader.result.split(',')[1];
   	// load the document
   	TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat, base64);
   	};
   	reader.readAsDataURL(blob);
   	}
   	};
   	xhr.send();
   	}

   view raw tx.js hosted with ❤ by GitHub

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 test.json hosted with ❤ by GitHub

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

   	import { Component } from '@angular/core';
   	import { CommonModule } from '@angular/common';
   	import { RouterOutlet } from '@angular/router';
   	import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';
   	declare const saveDocument: any;
   	declare const loadDocumentFromUrl: any;
   	declare const TXTextControl: any;
   	@Component({
   	selector: 'app-root',
   	standalone: true,
   	imports: [CommonModule, RouterOutlet, DocumentEditorModule],
   	templateUrl: './app.component.html',
   	styleUrl: './app.component.css'
   	})
   	export class AppComponent {
   	async onClickSave() {
   	var base64Document = await saveDocument(TXTextControl.StreamType.InternalUnicodeFormat);
   	console.log(base64Document);
   	}
   	onClickLoad() {
   	loadDocumentFromUrl("http://yourdomain/getDocument?filename=demo.tx");
   	}
   	}

   view raw test.ts hosted with ❤ by GitHub

   The URL specified in the loadDocumentFromUrl method in this example should be replaced with your endpoint, which will return any supported document as a file.

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

   	<tx-document-editor
   	width="1000px"
   	height="500px"
   	webSocketURL="wss://backend.textcontrol.com/TXWebSocket?access-token=yourtoken">
   	</tx-document-editor>
   	<div>
   	<button (click)="onClickLoad()" class="btn btn-primary">Load Document</button>
   	<button (click)="onClickSave()" class="btn btn-primary">Save Document</button>
   	</div>

   view raw test.html hosted with ❤ by GitHub

Starting the Application

After launching this application, the Load Document button loads a document from a URL. When you click the Save Document button, the document is saved in the internal TX Text Control format and written to the console as a base64-encoded string for demonstration purposes.