# Getting Started: Loading and Saving Documents using Angular
> This tutorial shows how to load and save documents using the JavaScript API in Angular applications.
- **Author:** Bjoern Meyer
- **Published:** 2023-01-30
- **Modified:** 2025-11-16
- **Description:** This tutorial shows how to load and save documents using the JavaScript API in Angular applications.
- **2 min read** (326 words)
- **Tags:**
- Angular
- JavaScript
- Reporting
- **LLMs.txt URL:** https://www.textcontrol.com/blog/2023/01/30/loading-and-saving-documents-using-angular/llms.txt
- **LLMs-full.txt URL:** https://www.textcontrol.com/blog/2023/01/30/loading-and-saving-documents-using-angular/llms-full.txt
- **Canonical URL:** https://www.textcontrol.com/blog/2023/01/30/loading-and-saving-documents-using-angular/
---
In a [previous tutorial](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms-full.txt), you learned how to create your first Angular application using the TX Text Control Document Editor.
This tutorial shows how to use the JavaScript API to load and save documents within an Angular application.
### Creating the Application
1. Create a basic Angular application as described in this tutorial:
[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)
2. Create a folder named *js* in the folder *src/assets/* and create a new JavaScript file named *custom.js*.
```
function saveDocument() {
// save document
TXTextControl.saveDocument(TXTextControl.StreamType.AdobePDF, function (e) {
// create temporary link element
var element = document.createElement('a');
element.setAttribute('href', 'data:application/octet-stream;base64,' + e.data);
element.setAttribute('download', "results.pdf");
element.style.display = 'none';
document.body.appendChild(element);
// simulate click
element.click();
// remove the link
document.body.removeChild(element);
});
}
function loadDocument() {
const htmlDocument = "
Hello World!
";
TXTextControl.loadDocument(TXTextControl.StreamType.HTMLFormat,
window.btoa(htmlDocument));
}
```
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 the methods *onClickSave* and *onClickLoad* to the *app.component.ts* TypeScript file, so that the complete file looks like this:
```
import { Component } from '@angular/core';
declare const saveDocument: any;
declare const loadDocument: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-editor-app';
onClickSave() {
saveDocument();
}
onClickLoad() {
loadDocument();
}
}
```
5. Finally, add two buttons to the *app.component.html* with the Angular click handlers:
```
```
When executing the application, an HTML document is loaded into the editor when clicking the button *Load Document* and the button *Save Document* saves the content as an Adobe PDF document that is downloaded to the browser.
---
## 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
- [Getting Started: Angular Document Editor Attributes Explained](https://www.textcontrol.com/blog/2023/02/01/getting-started-angular-document-editor-attributes-explained/llms.txt)
- [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)
- [Impressions from Web Developer Conference (WDC) in Hamburg](https://www.textcontrol.com/blog/2019/10/16/impressions-from-web-developer-conference/llms.txt)
- [Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2019/10/10/loading-and-saving-documents-using-angular/llms.txt)
- [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt)
- [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/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)
- [Getting Started: Document Viewer with Angular CLI v18.0](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/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)
- [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)
- [Document Viewer for Angular: SignatureSettings Explained](https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/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)
- [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)
- [Reuse Angular Document Editor Instances in Bootstrap Tabs](https://www.textcontrol.com/blog/2023/05/22/reuse-angular-document-editor-instances-in-bootstrap-tabs/llms.txt)
- [Getting Started: Document Viewer with Angular CLI](https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/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)
- [Getting Started: Document Editor with Angular](https://www.textcontrol.com/blog/2022/09/08/getting-started-document-editor-with-angular/llms.txt)
- [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt)
- [TX Text Control Document Editor Deployment Strategies](https://www.textcontrol.com/blog/2021/08/10/document-editor-deployment-strategies/llms.txt)
- [Track Changes: Show 'Original' and 'No Markup'](https://www.textcontrol.com/blog/2021/02/18/track-changes-show-original-and-no-markup/llms.txt)
- [Using the Document Viewer in Angular Routes](https://www.textcontrol.com/blog/2021/01/14/using-document-viewer-in-angular-routes/llms.txt)
- [Live Samples Hosted on StackBlitz](https://www.textcontrol.com/blog/2020/06/11/live-samples-hosted-on-stackblitz/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)
- [Using Text Control in Angular Routes](https://www.textcontrol.com/blog/2020/03/30/using-text-control-in-angular-routes/llms.txt)