# DS Server: Using DocumentViewer in Angular Applications > This quickstart tutorial shows how to use the DocumentViewer of DS Server in Angular applications. - **Author:** Bjoern Meyer - **Published:** 2020-12-21 - **Modified:** 2025-11-16 - **Description:** This quickstart tutorial shows how to use the DocumentViewer of DS Server in Angular applications. - **2 min read** (307 words) - **Tags:** - Angular - DocumentViewer - DS Server - Release - **LLMs.txt URL:** https://www.textcontrol.com/blog/2020/12/21/ds-server-using-documentviewer-in-angular-applications/llms.txt - **LLMs-full.txt URL:** https://www.textcontrol.com/blog/2020/12/21/ds-server-using-documentviewer-in-angular-applications/llms-full.txt - **Canonical URL:** https://www.textcontrol.com/blog/2020/12/21/ds-server-using-documentviewer-in-angular-applications/ --- This quickstart tutorial shows how to use the [DocumentProcessing.DocumentViewer](https://docs.textcontrol.com/textcontrol/ds-server/article.clientds.angular.htm) in an Angular application. ### Prerequisites 1. Create your free trial token here: [Create trial token](https://www.dsserver.io/trial/) 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 ``` ### Creating the Project 1. Open a Command Prompt and create a new project and default app by typing in the following command: ``` ng new my-ds-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-ds-viewer-app ``` 3. Install the DS Server DocumentViewer package by typing in the following command: ``` ng add @txtextcontrol/tx-ng-ds-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 the *oauthClientID* and the *oauthClientSecret* values with your private trial token keys you created at the beginning of this tutorial. ``` ``` 6. Open the file *src* -> *app* -> *app.module.ts* and replace the complete file with the following code to import the required *HttpClientModule*: ``` import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { DocumentViewerModule } from '@txtextcontrol/tx-ng-ds-document-viewer'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, DocumentViewerModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` 7. Back in the command prompt, start the Angular application by typing in the following command: ``` ng serve --open ``` --- ## 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 - [DocumentViewer: Deploying Forms](https://www.textcontrol.com/blog/2021/07/02/document-viewer-deploying-forms/llms.txt) - [Version 30.0 Live Preview](https://www.textcontrol.com/blog/2021/09/22/version-30-live-preview/llms.txt) - [TX Text Control 30.0 Preview: Improved Online Document Editor Ribbon Design](https://www.textcontrol.com/blog/2021/09/17/tx-text-control-30-preview-improved-online-document-editor-ribbon-design/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 Pre-Release: UI Improvements and Events](https://www.textcontrol.com/blog/2021/07/01/documentviewer-pre-release-ui-improvements-and-events/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) - [DS Server: Merging Documents using the DocumentProcessing Web API in Angular](https://www.textcontrol.com/blog/2020/12/22/ds-server-merging-documents-in-angular/llms.txt) - [DS Server: Using DocumentEditor in Angular Applications](https://www.textcontrol.com/blog/2020/12/21/ds-server-using-documenteditor-in-angular-applications/llms.txt) - [Announcing DS Server Public Beta: Your On-Premise Document Services Cloud](https://www.textcontrol.com/blog/2020/12/18/announcing-ds-server-public-beta/llms.txt) - [New Product Announcement: DS Server](https://www.textcontrol.com/blog/2020/10/12/new-product-announcement-ds-server/llms.txt) - [Updated DocumentViewer Features: Zooming and Panning](https://www.textcontrol.com/blog/2020/08/24/new-documentviewer-features-zooming-and-panning/llms.txt) - [Announcing TX Text Control DS Server 5.0](https://www.textcontrol.com/blog/2026/03/12/announcing-tx-text-control-ds-server-5-0/llms.txt) - [Introducing DS Server 4.0: Linux-Ready and Container-Friendly](https://www.textcontrol.com/blog/2025/04/30/introducing-ds-server-4-linux-ready-and-container-friendly/llms.txt) - [DS Server 3.5.0 Released](https://www.textcontrol.com/blog/2024/09/24/ds-server-3-5-0-released/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) - [DS Server 3.3.0 Released](https://www.textcontrol.com/blog/2024/02/16/ds-server-3-3-0-released/llms.txt) - [DS Server 3.2.0 Released](https://www.textcontrol.com/blog/2023/11/08/ds-server-3-2-0-released/llms.txt) - [Impressions from Web Developer Conference WDC 2023 in Hamburg, Germany](https://www.textcontrol.com/blog/2023/09/21/impressions-from-web-developer-conference-wdc-2023-in-hamburg-germany/llms.txt) - [DS Server 3.1.1 Released](https://www.textcontrol.com/blog/2023/04/12/ds-server-3-1-1-released/llms.txt) - [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) - [Impressions from NDC London 2023](https://www.textcontrol.com/blog/2023/01/30/impressions-from-ndc-london-2023/llms.txt) - [See Text Control at DEVintersection Fall 2022 in Las Vegas](https://www.textcontrol.com/blog/2022/11/15/see-text-control-at-devintersection-fall-2022-in-las-vegas/llms.txt) - [Merging Signature Annotations into Documents](https://www.textcontrol.com/blog/2022/10/19/merging-signature-annotations-into-documents/llms.txt) - [DS Server 3.0: Deploying DS Server without IIS using Docker](https://www.textcontrol.com/blog/2022/10/08/ds-server-30-deploying-ds-server-without-iis-using-docker/llms.txt)