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) };
     }
  }

}

The method simply loads a document given by it's name into a new instance of the ServerTextControl 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 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; }
}

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" />

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));
  }
}

The JavaScript function loadDocument simply loads the given document:

function loadDocument(document) {
  TXTextControl.loadDocument(TXTextControl.streamType.InternalUnicodeFormat, document.document);
}

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