# Getting Started: Loading and Saving Documents using Angular
> This article shows how to load and save documents using the Angular Document Editor. It explains how to use the Angular Document Editor in an Angular application and how to load from a URL and how to save a document.
- **Author:** Bjoern Meyer
- **Published:** 2024-03-14
- **Modified:** 2025-11-16
- **Description:** This article shows how to load and save documents using the Angular Document Editor. It explains how to use the Angular Document Editor in an Angular application and how to load from a URL and how to save a document.
- **3 min read** (523 words)
- **Tags:**
- Angular
- Document Editor
- Loading
- **LLMs.txt URL:** https://www.textcontrol.com/blog/2024/03/14/loading-and-saving-documents-using-angular/llms.txt
- **LLMs-full.txt URL:** https://www.textcontrol.com/blog/2024/03/14/loading-and-saving-documents-using-angular/llms-full.txt
- **Canonical URL:** https://www.textcontrol.com/blog/2024/03/14/loading-and-saving-documents-using-angular/
---
You learned how to use the TX Text Control document editor to create your first Angular application in a [previous tutorial](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms-full.txt). This tutorial will show you how to use the JavaScript API to load a document from a URL and how to save a document within an Angular application.
### Prerequisites
This tutorial is based on the basic Angular application created in the first step-by-step tutorial.
> **Learn More**
>
> This article shows how to use the TX Text Control Document Editor npm package for Angular within an Angular CLI application. This is the first course of a getting started series for Angular to learn how to use the Document Editor in Angular.
>
> [Getting Started: Document Editor with Angular CLI ](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms-full.txt)
### Creating the Application
1. Open the Angular application created in the [previous tutorial](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms-full.txt) in your preferred editor such as Visual Studio Code.
2. Create a folder named *js* in the folder *src/assets/* and create a new JavaScript file named *tx.js*. Paste the following into the newly created file:
```
async function saveDocument(StreamType) {
// save document
return new Promise((resolve, reject) => {
TXTextControl.saveDocument(StreamType, function (e) {
if (e) {
resolve(e.data);
} else {
reject('Error saving document');
}
});
});
}
function loadDocumentFromUrl(url) {
// download document using xml http request
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
var blob = xhr.response;
var reader = new FileReader();
reader.onload = function () {
// get the base64 encoded string
var base64 = reader.result.split(',')[1];
// load the document
TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat, base64);
};
reader.readAsDataURL(blob);
}
};
xhr.send();
}
```
3. Add this JavaScript file to the scripts array of the projects *architect/build/options* element in the *angular.json* file:
```
"scripts": [
"src/assets/js/custom.js"
]
```
4. Add the declaration and *onClickSave* and *onClickLoad* methods to the *app.component.ts* TypeScript file, so that the complete file looks like this:
```
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';
declare const saveDocument: any;
declare const loadDocumentFromUrl: any;
declare const TXTextControl: any;
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, DocumentEditorModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
async onClickSave() {
var base64Document = await saveDocument(TXTextControl.StreamType.InternalUnicodeFormat);
console.log(base64Document);
}
onClickLoad() {
loadDocumentFromUrl("http://yourdomain/getDocument?filename=demo.tx");
}
}
```
The URL specified in the *loadDocumentFromUrl* method in this example should be replaced with your endpoint, which will return any supported document as a file.
5. Finally, add two buttons to the *app.component.html* using the Angular click handlers:
```
```
### Starting the Application
After launching this application, the *Load Document* button loads a document from a URL. When you click the *Save Document* button, the document is saved in the internal TX Text Control format and written to the console as a base64-encoded string for demonstration purposes.
---
## 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
- [Getting Started: Document Editor with Angular CLI](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms.txt)
- **Getting Started: Loading and Saving Documents using Angular** (this article)
- [Getting Started: Programming the Angular Document Editor using JavaScript](https://www.textcontrol.com/blog/2023/01/30/getting-started-programming-the-angular-document-editor-using-javascript/llms.txt)
- [Getting Started: Angular Document Editor Attributes Explained](https://www.textcontrol.com/blog/2023/02/01/getting-started-angular-document-editor-attributes-explained/llms.txt)
---
## Related Posts
- [Reuse Persistent Document Editor Components in Angular SPA Applications](https://www.textcontrol.com/blog/2025/04/03/reuse-persistent-document-editor-components-in-angular-spa-applications/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)
- [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt)
- [Changing the Language in the Angular Document Editor Using the Resource Kit](https://www.textcontrol.com/blog/2025/03/05/changing-the-language-in-the-angular-document-editor-using-the-resource-kit/llms.txt)
- [Customizing the Ribbon in TX Text Control for Angular](https://www.textcontrol.com/blog/2024/09/11/customizing-the-ribbon-in-tx-text-control-for-angular/llms.txt)
- [Getting Started Video Tutorial: How to use the Document Editor in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-editor-in-angular/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)
- [ASP.NET Core: Loading Documents in the Document Editor](https://www.textcontrol.com/blog/2024/04/15/asp-net-core-how-to-load-a-document-in-the-document-editor/llms.txt)
- [Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API](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)
- [MailMerge with Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/15/mailmerge-with-angular-and-asp-net-core/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)
- [Getting Started: Document Editor with Angular CLI v17.0](https://www.textcontrol.com/blog/2023/12/13/getting-started-document-editor-with-angular-cli-17/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)
- [Creating an Angular Document Editor Application with a Node.js WebSocket Server](https://www.textcontrol.com/blog/2023/08/24/creating-an-angular-document-editor-application-with-a-nodejs-websocket-server/llms.txt)
- [Angular: Loading Documents from Assets Folder on Initialization](https://www.textcontrol.com/blog/2023/07/10/angular-loading-documents-from-assets-folder-on-initialization/llms.txt)
- [Creating an Angular Application with an ASP.NET Core Backend](https://www.textcontrol.com/blog/2023/05/05/creating-an-angular-application-with-an-aspnet-core-backend/llms.txt)
- [Getting Started: Document Editor with Angular CLI](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms.txt)
- [Angular: Deploying the Backend TCP Service Separately](https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/llms.txt)
- [Angular: Loading Excerpt JSON Data on Initializing TX Text Control](https://www.textcontrol.com/blog/2020/09/02/angular-loading-excerpt-json-data-on-initializing-txtextcontrol/llms.txt)
- [Signing Documents with the Angular DocumentViewer](https://www.textcontrol.com/blog/2020/08/11/signing-documents-with-the-angular-documentviewer/llms.txt)
- [Angular: Loading Documents on Initializing TX Text Control](https://www.textcontrol.com/blog/2020/08/07/angular-loading-documents-on-initializing-txtextcontrol/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)
- [JavaScript Functions for Typical Form Field Tasks](https://www.textcontrol.com/blog/2020/04/15/javascript-functions-for-typical-form-field-tasks/llms.txt)
- [Angular: Loading and Saving Local Documents](https://www.textcontrol.com/blog/2019/12/06/angular-loading-and-saving-local-documents/llms.txt)