# Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API > This article shows how to load and save documents in an Angular Document Editor using an ASP.NET Core Web API asynchronously. A Web API is used to load and save documents from and to the server and the Angular Document Editor is used to display and edit the documents. - **Author:** Bjoern Meyer - **Published:** 2024-03-21 - **Modified:** 2026-07-17 - **Description:** This article shows how to load and save documents in an Angular Document Editor using an ASP.NET Core Web API asynchronously. A Web API is used to load and save documents from and to the server and the Angular Document Editor is used to display and edit the documents. - **5 min read** (935 words) - **Tags:** - Angular - ASP.NET Core - Document Viewer - Loading - Saving - Web API - **Web URL:** https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/TXTextControl.Web.Core.Angular.Loading.List --- The [Angular Document Editor](https://www.textcontrol.com/product/client-package/) can be used completely independent of a server-side backend, so you will need to use JavaScript to load and save documents. However, in most cases, documents are stored in a backend application that also provides the endpoints for accessing data such as documents. ### Asynchronous Loading This sample application shows how to provide the endpoints to retrieve and save documents, and how to load them into the Angular Document Editor. The following screen video shows the example of displaying a list of documents with buttons to load the selected document into the editor. ![Angular Loading TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/03/21/a/assets/loading.gif "Angular Loading TX Text Control") The Angular Document Editor is a component that can be used to display and edit documents in Angular applications. The editor can be used to load and save documents from and to the server. The editor is part of the [TX Text Control Angular package](https://www.textcontrol.com/product/client-package/) that can be installed via npm. ### Retrieving a List of Documents The Web API controller is implemented in the ASP.NET Core backend application. The controller provides the endpoints to load and save documents and to return a list of available documents. The following code shows the Web API controller that returns documents stored in the *App\_Data* folder: ``` [HttpGet] [Route("List")] public IEnumerable List() { // file all file names from App_Data var files = Directory.GetFiles("App_Data"); var data = new List(); foreach (var file in files) { data.Add(new DocumentData { Name = Path.GetFileName(file), }); } return data; } ``` The transport object used that is serialized to JSON is the *DocumentData* class. The following code shows the *DocumentData* class that is used to transfer the document data between the client and the server: ``` public class DocumentData { public string Data { get; set; } public string Name { get; set; } } ``` This interface is also defined in Angular: ``` interface DocumentData { data: string; name: string; } ``` On initialization, this endpoint is called to fill the array of DocumentData *documentList*. ``` export class AppComponent implements OnInit { // public array of DocumentData public documentList: DocumentData[] = []; public selectedDocument: DocumentData | undefined; constructor(private http: HttpClient) {} ngOnInit() { this.getFilenames(); } getFilenames() { this.http.get('/document/list').subscribe( (result) => { this.documentList = result; }, (error) => { console.error(error); } ); } } ``` The *documentList* array is used to display the list of documents. The following code shows the Angular component that displays the list of documents: ```

Document List

Loading... Please refresh once the ASP.NET backend has started.

Name Action
{{ document.name }}
``` When the user clicks a *Load* button, the selected document name is passed to the endpoint to retrieve the document data from the backend. As you can see in the screenshot, the *Save* button is only displayed when a document is selected. ![Angular Loading TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/03/21/a/assets/loading.webp "Angular Loading TX Text Control") ### Loading a Document The following code shows the server-side *Load* Controller that returns the selected document data. ``` [HttpGet] [Route("Load")] public DocumentData Load(string name) { // load the file from App_Data var file = Path.Combine("App_Data", name); var data = new DocumentData { Name = name, Data = Convert.ToBase64String(System.IO.File.ReadAllBytes(file)), }; return data; } ``` On the Angular side, the returned document is then loaded into the document editor with the appropriate *StreamType*, which is determined by the filename extension. ``` loadDocument(name: string) { // Call HTTP GET with the name of the document as a query parameter this.http.get('/document/load', { params: { name: name } }).subscribe( (result) => { this.selectedDocument = result; let streamType = TXTextControl.StreamType.InternalUnicodeFormat; switch (this.selectedDocument.name.split('.').pop()) { case 'docx': streamType = TXTextControl.StreamType.WordprocessingML; break; case 'rtf': streamType = TXTextControl.StreamType.RichTextFormat; break; case 'doc': streamType = TXTextControl.StreamType.MSWord; break; } TXTextControl.loadDocument(streamType, this.selectedDocument.data, () => { TXTextControl.setEditMode(1); }); }, (error) => { console.error(error); } ); } ``` ### Saving a Document When the user clicks the *Save* button, the document is saved back to the server. The following code shows the server-side *Save* Controller that saves the document data. ``` [HttpPost] [Route("Save")] public bool Save([FromBody] DocumentData documentData) { // save the file to App_Data var file = Path.Combine("App_Data", documentData.Name); System.IO.File.WriteAllBytes(file, Convert.FromBase64String(documentData.Data)); return true; } ``` The document data is passed to the server and saved to the *App\_Data* folder. The following code shows the Angular component that sends the document data to the server. The saveDocument method of the TX Text Control is used to save the document in the appropriate format as a base64-encoded string. ``` saveDocument(name: string) { let streamType = TXTextControl.StreamType.InternalUnicodeFormat; switch (this.selectedDocument?.name.split('.').pop()) { case 'docx': streamType = TXTextControl.StreamType.WordprocessingML; break; case 'rtf': streamType = TXTextControl.StreamType.RichTextFormat; break; case 'doc': streamType = TXTextControl.StreamType.MSWord; break; } TXTextControl.saveDocument(streamType, (document: any) => { if (this.selectedDocument) { this.selectedDocument.data = document.data; // Send a POST request to the server this.http.post('/document/save', this.selectedDocument).subscribe( (result) => { alert("Document saved successfully"); this.getFilenames(); } ); } }); } ``` ### Conclusion This article showed how to load and save documents in an Angular Document Editor using an ASP.NET Core Web API asynchronously. A Web API is used to load and save documents from and to the server and the Angular Document Editor is used to display and edit the documents. The sample project is available on GitHub. Download the sample project and test it on your own. Should you have any inquiries or require further assistance, please do not hesitate to [reach out](https://www.textcontrol.com/contact/) to us. We're here to help!. Happy coding! --- ## 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) --- ## Series - [MailMerge with Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/15/mailmerge-with-angular-and-asp-net-core/llms.txt) - [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/llms.txt) - [Document Viewer for Angular: SignatureSettings Explained](https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/llms.txt) - **Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API** (this article) - [Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms.txt) - [Handling Form Field Data in Angular Applications](https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/llms.txt) --- ## Related Posts - [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) - [Getting Started Video Tutorial: How to use the Document Viewer in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-angular/llms.txt) - [Handling Form Field Data in Angular Applications](https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/llms.txt) - [Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms.txt) - [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/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)