# Creating an Angular DocumentViewer Application > TX Text Control's document processing technologies can be also leveraged by Angular applications. This article shows how to integrate the TX Text Control DocumentViewer into an Angular web application. > **Note:** This article is outdated and may no longer be accurate. - **Author:** Bjoern Meyer - **Published:** 2020-06-05 - **Modified:** 2025-11-16 - **Description:** This article shows how to integrate the TX Text Control DocumentViewer into an Angular application. - **3 min read** (458 words) - **Tags:** - Angular - ASP.NET - DocumentViewer - **Web URL:** https://www.textcontrol.com/blog/2020/06/05/creating-an-angular-document-viewer-application/ - **LLMs URL:** https://www.textcontrol.com/blog/2020/06/05/creating-an-angular-document-viewer-application/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/06/05/creating-an-angular-document-viewer-application/llms-full.txt --- > **Updated Article Available** > > This article is outdated and there is an updated article available. > > [Getting Started: Document Viewer with Angular CLI ](https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/llms-full.txt) ### Creating your First Angular Application This tutorial shows how to create your first Angular application using TX Text Control DocumentViewer for Angular. #### Prerequisites 1. Create your free trial access token here: [Create Access Token](https://www.textcontrol.com/product/client-package/token/) 2. Install [Node.js®](https://nodejs.org/en/download/) and npm, if not done before. 3. Open a Command Prompt and install the [Angular CLI](https://github.com/angular/angular-cli) globally by typing in the following command: ``` npm install -g @angular/cli ``` This tutorial uses Visual Studio Code that can be [downloaded](https://code.visualstudio.com/) for free. #### Creating the Angular Project 1. Open a Command Prompt and create a new project and default app by typing in the following command: ``` ng new my-viewer-app ``` Follow the questions in the command prompt by answering them with "y" to add Angular routing and *Enter* to confirm *CSS* as your preferred stylesheet format. 2. Change into the created folder by typing in the following command: ``` cd my-viewer-app ``` 3. Install the TX Text Control document editor package by typing in the following command: ``` ng add @txtextcontrol/tx-ng-document-viewer ``` 4. Open this folder in Visual Studio Code by typing in the following command: ``` code . ``` 5. In Visual Studio Code, open the file *src -> app -> app.component.html*, add the following code and save it. Replace *yourtoken* with your actual access token you created at the beginning of this tutorial. ``` ``` ![Angular](https://s1-www.textcontrol.com/assets/dist/blog/2020/06/05/a/assets/editor.webp "Angular") 6. Back in the command prompt, start the Angular application by typing in the following command: ``` ng serve --open ``` Your default browser is opened with your created Angular app: ![Angular](https://s1-www.textcontrol.com/assets/dist/blog/2020/06/05/a/assets/chrome.webp "Angular") --- ### Additional Steps This tutorial uses a demo server backend for the required endpoints that is specified through the *basePath* attribute. #### Creating Your Own Backend Server To learn how to create your own Backend server project, please have a look at this tutorial: [Building an ASP.NET Core Backend for Angular Applications](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms-full.txt) You don't have to actually add a view to this backend server. #### Attribute Documentation All available attributes for the Angular element are documented in the NPM package overview page: [TX Text Control Document Viewer (Angular version)](https://www.npmjs.com/package/@txtextcontrol/tx-ng-document-viewer) #### Using the JavaScript API In order to program the Angular Document Viewer, a JavaScript API is available. This API is compatible to all supported platforms including ASP.NET MVC, ASP.NET Core and Angular. The API documentation can be found here: TXDocumentViewer --- ## 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) - [Angular DocumentViewer: Loading Documents from an ASP.NET Core Backend Web API](https://www.textcontrol.com/blog/2020/06/08/angular-documentviewer-loading-documents-from-backend/llms.txt) - [DocumentViewer for Angular Beta Released](https://www.textcontrol.com/blog/2020/06/05/document-viewer-for-angular-beta-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) - [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)