# Getting Started: Document Viewer with Angular CLI > This article shows how to use the TX Text Control Document Viewer npm package for Angular within a Angular CLI application. - **Author:** Bjoern Meyer - **Published:** 2023-02-02 - **Modified:** 2025-11-16 - **Description:** This article shows how to use the TX Text Control Document Viewer npm package for Angular within a Angular CLI application. - **4 min read** (666 words) - **Tags:** - Angular - JavaScript - Document Viewer - **Web URL:** https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/llms-full.txt --- > ### Prerequisites > > There are two ways to evaluate the TX Text Control *Document Viewer*. You can either host your own backend by downloading the trial version of TX Text Control .NET Server, or by creating a trial access token to use a hosted backend, valid for 30 days: > > - [Download Trial Version](https://www.textcontrol.com/product/tx-text-control-dotnet-server/) > Setup download and installation required. > - [Create Trial Access Token](https://www.textcontrol.com/product/client-package/token/) > No download and local installation required. ### Creating your First Angular Application This tutorial shows how to create your first Angular application using the TX Text Control document viewer. #### 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 viewer package by typing in the following command: ``` ng add @txtextcontrol/tx-ng-document-viewer ``` > **Supported Angular Versions** > > Are you getting an error similar to this? > > ``` > ERESOLVE unable to resolve dependency tree > ``` > > You have two options here: > > > 1. Please check the [supported Angular versions](https://www.npmjs.com/package/@txtextcontrol/tx-ng-document-editor?activeTab=readme) of *tx-ng-document-editor* and downgrade Angular and the global Angular CLI version to a version that will satisfy the requirement. > 2. Force the installation of the package. Read more about that here: > [Document Editor and Viewer with Newer Versions of Angular CLI](https://www.textcontrol.com/blog/2023/08/18/document-editor-and-viewer-with-newer-versions-of-angular-cli/llms-full.txt) 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 replace the complete content with the following code, replace *yourtoken* with your given [Trial Access Token](https://www.textcontrol.com/product/client-package/token/) and save it: ``` ``` > **Backend Server** > > In the code above, a hosted demo backend server is used specified through the *basePath* property. If you are hosting your own required backend server, replace the URL with your backend endpoint. ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2023/02/02/a/assets/code_2.webp "Creating the application") 6. Back in the command prompt, start the Angular application by typing in the following command: ``` ng serve --open ``` ### Next Steps This quick start tutorial helped you to create your first Angular application using the TX Text Control Document Viewer. The following articles explain further steps that help to integrate the document viewer into your own infrastructure. > **Signing Documents with the Angular DocumentViewer** > > The TX Text Control DocumentViewer for Angular can be used to request signatures for an electronic document signing process. This tutorial shows how to request a signature. > > [Read Tutorial ](https://www.textcontrol.com/blog/2020/08/11/signing-documents-with-the-angular-documentviewer/llms-full.txt) > **Building a ASP.NET Core Backend** > > TX Text Control for Angular requires a backend for the document editor and viewer. This step-by-step walkthrough shows how to create the ASP.NET Core backend. > > [Read Tutorial ](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms-full.txt) > **JavaScript API Reference** > > 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, WebForms and Node.js. > > [Open Documentation ](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.javascript.txdocumentviewer.object.htm) ### Article Collection To find more articles, samples and tutorials, please visit the *Getting Started* section. [Getting Started ](https://www.textcontrol.com/product/tx-text-control-dotnet-server/getting-started/?type=Getting+Started&technology=Angular&component=DocumentViewer) --- ## 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: 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 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) - [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) - [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) - [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) - [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) - [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) - [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) - [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) - [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) - [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) - [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) - [Getting Started: Document Viewer with JavaScript](https://www.textcontrol.com/blog/2023/09/15/getting-started-document-viewer-with-javascript/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) - [Preview: PDF.js Support for Form Fields, Selections and Annotations](https://www.textcontrol.com/blog/2023/04/18/preview-pdfjs-support-for-form-fields-selections-and-annotations/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) - [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: Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2023/01/30/loading-and-saving-documents-using-angular/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) - [What is the Difference between Electronic and Digital Signatures?](https://www.textcontrol.com/blog/2022/10/20/what-is-the-difference-between-electronic-and-digital-signatures/llms.txt) - [Merging Signature Annotations into Documents](https://www.textcontrol.com/blog/2022/10/19/merging-signature-annotations-into-documents/llms.txt)