# Angular: Loading Documents from an ASP.NET Core Backend > This sample shows how to load documents into the Angular document editor from an ASP.NET Core backend application using Web API Http requests. - **Author:** Bjoern Meyer - **Published:** 2021-07-28 - **Modified:** 2026-07-17 - **Description:** This sample shows how to load documents into the Angular document editor from an ASP.NET Core backend application using Web API Http requests. - **3 min read** (429 words) - **Tags:** - Angular - ASP.NET - DocumentEditor - **Web URL:** https://www.textcontrol.com/blog/2021/07/28/angular-loading-documents-from-an-aspnet-core-backend/ - **LLMs URL:** https://www.textcontrol.com/blog/2021/07/28/angular-loading-documents-from-an-aspnet-core-backend/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2021/07/28/angular-loading-documents-from-an-aspnet-core-backend/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/TXTextControl.Core.Angular.Loading --- 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: ``` ``` 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(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); } ``` ![Loading documents into TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2021/07/28/a/assets/loading.webp "Loading documents into TX Text Control") You can test this on your own by cloning or downloading the sample from our GitHub repository. --- ## 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 - [Announcing New Signature Features: Initials and SVG](https://www.textcontrol.com/blog/2022/04/27/announcing-new-signature-features-initials-and-svg/llms.txt) - [Document Editor: Implementing a Contextual Toolbar](https://www.textcontrol.com/blog/2022/04/22/document-editor-implementing-a-contextual-toolbar/llms.txt) - [Document Editor with TX Spell .NET on Linux using ASP.NET Core](https://www.textcontrol.com/blog/2026/01/28/document-editor-tx-spell-net-linux-aspnet-core/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) - [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt) - [Video Tutorial: Creating a MailMerge Template and JSON Data Structure](https://www.textcontrol.com/blog/2024/08/16/video-tutorial-creating-a-mailmerge-template-and-json-data-structure/llms.txt) - [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt) - [Mail Merge: The Pre-Shaped Data Concept Explained](https://www.textcontrol.com/blog/2024/05/30/mail-merge-the-pre-shaped-data-concept-explained/llms.txt) - [Meet Text Control at NDC Oslo 2024](https://www.textcontrol.com/blog/2024/05/28/meet-text-control-at-ndc-oslo-2024/llms.txt) - [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt) - [Comments JavaScript API: Useful Tips and Tricks](https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms.txt) - [Integrating Document Lifecycle Management with ASP.NET Core and C#](https://www.textcontrol.com/blog/2024/03/29/integrating-document-lifecycle-management-with-asp-net-core-and-c-sharp/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Customizing Electronic Signature Fonts for Typed Signatures in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/11/customizing-electronic-signature-fonts-for-typed-signatures-in-angular-and-asp-net-core/llms.txt) - [View and Edit MS Word DOCX Documents in Angular](https://www.textcontrol.com/blog/2023/10/26/view-and-edit-ms-word-docx-documents-in-angular/llms.txt) - [Impressions from Web Developer Conference WDC 2023 in Hamburg, Germany](https://www.textcontrol.com/blog/2023/09/21/impressions-from-web-developer-conference-wdc-2023-in-hamburg-germany/llms.txt) - [Meet Text Control at BASTA! 2023 in Mainz, Germany](https://www.textcontrol.com/blog/2023/09/08/meet-text-control-at-basta-2023-in-mainz-germany/llms.txt)