# Angular DocumentViewer: Loading Documents from an ASP.NET Core Backend Web API > TX Text Control DocumentViewer for Angular can be used to display documents in Angular applications. This article shows how to load documents from an ASP.NET Core API Controller. - **Author:** Bjoern Meyer - **Published:** 2020-06-08 - **Modified:** 2026-07-17 - **Description:** This article shows how to load documents from an ASP.NET Core API Controller into TX Text Control DocumentViewer for Angular. - **3 min read** (443 words) - **Tags:** - Angular - ASP.NET - DocumentViewer - .NET Core - **Web URL:** https://www.textcontrol.com/blog/2020/06/08/angular-documentviewer-loading-documents-from-backend/ - **LLMs URL:** https://www.textcontrol.com/blog/2020/06/08/angular-documentviewer-loading-documents-from-backend/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/06/08/angular-documentviewer-loading-documents-from-backend/llms-full.txt --- 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(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*: ``` ``` 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(this._baseUrl + 'api/viewer/loaddocument').subscribe(result => { loadDocument(result); }, error => console.error(error)); } } ``` --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Preview: TX Text Control DocumentViewer Becomes a Web Component](https://www.textcontrol.com/blog/2023/03/10/preview-tx-text-control-documentviewer-is-becoming-a-web-component/llms.txt) - [Electronic Signatures: Document Audit Trails](https://www.textcontrol.com/blog/2021/10/14/electronic-signatures-document-audit-trails/llms.txt) - [Combine Form Fields, Merge Fields and Signature Boxes to Request Signatures](https://www.textcontrol.com/blog/2021/10/12/combine-form-fields-merge-fields-and-signature-boxes-to-request-signatures/llms.txt) - [eSign Demo: Requesting Signatures from Multiple Signers](https://www.textcontrol.com/blog/2021/10/07/esign-demo-requesting-signatures-from-multiple-signers/llms.txt) - [DocumentViewer 29.2 (29.0.302.500) Final Released](https://www.textcontrol.com/blog/2021/07/27/documentviewer-29-302-final-released/llms.txt) - [DocumentViewer: Deploying Forms](https://www.textcontrol.com/blog/2021/07/02/document-viewer-deploying-forms/llms.txt) - [Smart Documents: Embedding Documents in PDF Containers](https://www.textcontrol.com/blog/2021/06/24/smart-document-containers-embedding-documents-in-pdf/llms.txt) - [DocumentViewer Annotations: Highlight Text](https://www.textcontrol.com/blog/2021/06/18/document-viewer-annotations-highlight-text/llms.txt) - [Creation of Custom Electronic Signature Boxes](https://www.textcontrol.com/blog/2021/06/15/creation-of-custom-electronic-signature-boxes/llms.txt) - [Updated DocumentViewer Features: Zooming and Panning](https://www.textcontrol.com/blog/2020/08/24/new-documentviewer-features-zooming-and-panning/llms.txt) - [Building an ASP.NET Core (.NET 6) Backend for Angular Applications](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms.txt) - [Angular DocumentViewer Final Released](https://www.textcontrol.com/blog/2020/07/13/angular-documentviewer-final-released/llms.txt) - [DocumentViewer for Angular Beta Released](https://www.textcontrol.com/blog/2020/06/05/document-viewer-for-angular-beta-released/llms.txt) - [Creating an Angular DocumentViewer Application](https://www.textcontrol.com/blog/2020/06/05/creating-an-angular-document-viewer-application/llms.txt) - [Building an Angular Application with an ASP.NET Core Back-End](https://www.textcontrol.com/blog/2020/05/06/building-an-angular-application-with-an-aspnet-core-backend/llms.txt) - [DocumentViewer for .NET Core 3.1 Released](https://www.textcontrol.com/blog/2020/04/08/documentviewer-for-dotnet-core-released/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt) - [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt) - [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt) - [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt) - [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt) - [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt) - [Back in the Pocono Mountains: Meet Text Control at TechBash 2024](https://www.textcontrol.com/blog/2024/09/24/back-in-the-pocono-mountains-meet-text-control-at-techbash-2024/llms.txt) - [Back from Copenhagen Developers Festival 2024](https://www.textcontrol.com/blog/2024/09/05/back-from-copenhagen-developers-festival-2024/llms.txt)