Using the Angular version of the TX Text Control DocumentViewer, you can load documents by passing the document as a base64 encoded string to the documentData parameter. In real-world applications, you might want to load documents from a server-side endpoint.

This article explains how to load a document from a Web API running in an ASP.NET Core Web Application.

The API Controller

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

[Route("api/[controller]")]
[ApiController]
public class ViewerController : ControllerBase
{
  [HttpGet]
  [Route("LoadDocument")]
  public LoadedDocument LoadDocument()
  {
    string documentName = "invoice.docx";

    LoadedDocument document = new LoadedDocument()
    {
      DocumentData = Convert.ToBase64String(
        System.IO.File.ReadAllBytes("App_Data/" + documentName)),
      DocumentName = documentName
    };

    return document;
  }
}

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

public class LoadedDocument
{
    public string DocumentData { get; set; }
    public string DocumentName { get; set; }
}

Angular TypeScript

In the Angular HomeComponent TypeScript, the endpoint is called in the constructor and the results are passed to the JavaScript function loadInitialDocument:

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare const loadDocument: any;
declare const loadInitialDocument: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})

export class HomeComponent {
  public _http: HttpClient;
  public _baseUrl: string;

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this._http = http;
    this._baseUrl = baseUrl;

    // get a document from the Web API endpoint 'LoadDocument'
    this._http.get<any>(this._baseUrl + 'api/viewer/loaddocument').subscribe(result => {
      loadInitialDocument(result);
    }, error => console.error(error));
  }
}

In the JavaScript code, the event documentViewerLoaded is added which is fired when the DocumentViewer has been initialized completely. In the event callback, the loadDocument function is called that actually loads the document into the DocumentViewer:

function loadDocument(Document) {
  TXDocumentViewer.loadDocument(Document.documentData, Document.documentName);
}

var documentLoading;

function loadInitialDocument(Document) {

  documentLoading = true;

  window.addEventListener("documentViewerLoaded", function () {
    
    if (documentLoading === true)
      loadDocument(Document);

    documentLoading = false;

  });
}

Loading a Document on a Button Click

The above method shows how to initialize the DocumentViewer with a document. When a document should be loaded on another action, you can simply call the loadDocument method. The following code shows the home.component.html:

<tx-document-viewer width="800px"
                    height="800px"
                    basePath="https://localhost:44354"
                    dock="Fill"
                    toolbarDocked=true
                    isSelectionActivated=true
                    showThumbnailPane=true>
</tx-document-viewer>

<input (click)="onClickLoadDocument()" type="button" value="Load Document" />

The following code shows the home.component.ts implementation including the onClickLoadDocument function that calls the loadDocument JavaScript function directly:

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare const loadDocument: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})

export class HomeComponent {
  public _http: HttpClient;
  public _baseUrl: string;

  async onClickLoadDocument() {
    // get a document from the Web API endpoint 'LoadDocument'
    this._http.get<any>(this._baseUrl + 'api/viewer/loaddocument').subscribe(result => {
      loadDocument(result);
    }, error => console.error(error));
  }
}