Using the Angular version of the TX Text Control DocumentEditor, documents can be loaded using the JavaScript API by passing the document as a base64 encoded string. In real-world applications, you might want to load documents from a server-side Web API endpoint.

This sample application uses an ASP.NET Core backend project to provide the WebSocketHandler that also exposes a Web API to load documents from a server.

Web API Controller

Consider the following simple controller implementation with the LoadDocument Http Get method:

[ApiController]
[Route("api/[controller]")]
public class TextControlController : ControllerBase
{
[HttpGet]
[Route("LoadDocument")]
public TextControlDocument LoadDocument(string DocumentName) {
using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) {
tx.Create();
tx.Load("App_Data/" + DocumentName, TXTextControl.StreamType.WordprocessingML);
byte[] data;
tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
return new TextControlDocument() { Document = Convert.ToBase64String(data) };
}
}
}
view raw test.cs hosted with ❤ by GitHub

The method simply loads a document given by it's name into a new instance of the ServerTextControl ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ ServerTextControl Class
The ServerTextControl class implements a component that provide high-level text processing features for server-based applications. in order to return the document in the internal Text Control format. Technically, the document editor is able to load all supported document types, but this way, we don't have to check the used StreamType ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl Object
╰ StreamType Enumeration Enumeration
Determines a certain text format. and potentially required document checks can be performed completed server-side.

It simply returns an object of type TextControlDocument that contains the document as a base64 encoded string. The model object is defined as follows:

public class TextControlDocument {
public string Document { get; set; }
}
view raw test.cs hosted with ❤ by GitHub

Angular TypeScript

The view consists of a Text Control editor and a button to load the document:

<tx-document-editor width="1000px"
height="500px"
webSocketURL="ws://localhost:32760/">
</tx-document-editor>
<input (click)="onClickLoadDocument('demo.docx')" type="button" value="Load Document" />
view raw test.html hosted with ❤ by GitHub

The following code shows the app.component.ts implementation including the onClickLoadDocument function that calls the loadDocument JavaScript function directly. The function onClickLoadDocument executes an Http GET method on our Web API controller method LoadDocument to retrieve the document:

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare const loadDocument: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public _http: HttpClient;
public _baseUrl: string;
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this._http = http;
this._baseUrl = baseUrl;
}
async onClickLoadDocument(documentName: string) {
// get a document from the Web API endpoint 'LoadDocument'
this._http.get<any>(this._baseUrl + 'api/textcontrol/loaddocument?documentName=' + documentName).subscribe(result => {
loadDocument(result);
}, error => console.error(error));
}
}
view raw test.ts hosted with ❤ by GitHub

The JavaScript function loadDocument simply loads the given document:

function loadDocument(document) {
TXTextControl.loadDocument(TXTextControl.streamType.InternalUnicodeFormat, document.document);
}
view raw test.js hosted with ❤ by GitHub

Loading documents into TX Text Control

You can test this on your own by cloning or downloading the sample from our GitHub repository.