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:

Loading...

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:

Loading...

Angular TypeScript

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

Loading...

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:

Loading...

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:

Loading...

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

Loading...