# Using Document Viewer Collaboration Features in Angular

> The TX Text Control DocumentViewer allows users to navigate through tracked changes and to add annotations in browser and mobile views. This article shows how to use those features in the Angular component.

- **Author:** Bjoern Meyer
- **Published:** 2022-07-28
- **Modified:** 2025-11-16
- **Description:** The TX Text Control DocumentViewer allows users to navigate through tracked changes and to add annotations in browser and mobile views. This article shows how to use those features in the Angular component.
- **2 min read** (286 words)
- **Tags:**
  - Angular
  - Document Viewer
  - Collaboration
- **Web URL:** https://www.textcontrol.com/blog/2022/07/28/using-document-viewer-collaboration-features-in-angular/
- **LLMs URL:** https://www.textcontrol.com/blog/2022/07/28/using-document-viewer-collaboration-features-in-angular/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2022/07/28/using-document-viewer-collaboration-features-in-angular/llms-full.txt

---

### Review Tracked Changes

The tracked changes collaboration feature provides users a unique way to review documents on any device. Specifically during negotiation processes, the review of changes made by other authors should be an effortless and accessible experience.

A new toolbar is available in case the document contains *Tracked Changes*. These changes can be made using MS Word, using the TX Text Control DocumentEditor or any other word processor that supports MS Word formats such as RTF, DOC and DOCX. The toolbar enables an easy navigation through all available changes in the document. Those changes can be accepted or rejected which is visually indicated in-place.

When a document contains tracked changes and is loaded into the viewer, the tracked changes toolbar is enabled automatically.

![Collaboration Features](https://s1-www.textcontrol.com/assets/dist/blog/2022/07/28/a/assets/animation_changes.webp "Collaboration Features")

### Annotations

The document viewer allows users to add and share annotations such as text comments, stamps, drawings and text selections to any type of document supported by TX Text Control including PDF, DOC, DOCX, RTF and the internal TX Text Control format (TX). This feature allows the easy integration of document collaboration workflow processes into your TX Text Control based applications.

![Collaboration Features](https://s1-www.textcontrol.com/assets/dist/blog/2022/07/28/a/assets/collab.webp "Collaboration Features")

### User Management

The Angular document viewer can be initialized with a specific user name that defines the current user using the userNames property in Angular:

```
<tx-document-viewer
  width = "800px"
  height = "800px"
  basePath = "https://backend.textcontrol.com?access-token=yourtoken"
  documentData = "SGVsbG8gdGhlcmU="
  dock = "Window"
  [toolbarDocked] = "true"
  documentPath = "test.docx"
  [userNames]= "['qa@textcontrol.com']"
</tx-document-viewer>
```

This user defines the current user to add annotations to the document:

![Collaboration Features](https://s1-www.textcontrol.com/assets/dist/blog/2022/07/28/a/assets/collab1.webp "Collaboration Features")

This user name is also exported to the annotation JSON when calling the *TXDocumentViewer.annotations.export()* method:

```
[
  [
    {
      "pen":{
        "type":"highlight",
        "color":"rgba(255, 0, 0, 1)",
        "composite":"destination-over",
        "start":4,
        "end":9,
        "text":"lo th"
      },
      "user":"qa@textcontrol.com",
      "time":1659000278132,
      "comments":[
        {
          "comment":"Hi there",
          "user":"qa@textcontrol.com",
          "date":1659000282893,
          "id":"7677c906-f478-4cc2-8cc5-b05ad52d16ed",
          "status":"none"
        }
      ],
      "id":"ee9d5372-31d0-4937-8f37-7663fce76394",
      "status":"Accepted"
    }
  ]
]
```

> **Getting Started**
> 
> To get started with the TX Text Control Angular components, take a look at the *Getting Started* section that contains tutorials, articles and samples.
> 
> [Getting Started with Angular ](https://www.textcontrol.com/product/tx-text-control-dotnet-server/getting-started/?type=Getting+Started&technology=Angular&component=)

---

## 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

- [Collaboration: New Annotations Sample](https://www.textcontrol.com/blog/2021/05/05/collaboration-new-annotations-sample/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 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)
- [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)
- [Adding and Sharing Annotations across Document Types using the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/04/19/adding-and-sharing-annotations-across-document-types-using-the-document-viewer-in-asp-net-core-c-sharp/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)
- [Document Viewer for Angular: SignatureSettings Explained](https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/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)
- [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)
- [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)
- [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: Document Viewer with Angular CLI](https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-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)
- [Document Viewer: Processing Tracked Changes](https://www.textcontrol.com/blog/2022/03/09/document-viewer-processing-tracked-changes/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)
- [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)
- [Advantages of a Modern Contract Lifecycle Management](https://www.textcontrol.com/blog/2021/05/07/advantages-of-a-modern-contract-lifecycle-management/llms.txt)
- [Text Control eSign Demo: Reusable Templates](https://www.textcontrol.com/blog/2021/04/30/text-control-esign-demo-reusable-templates/llms.txt)
- [eSign Online Demo: Contract Collaboration Workflows](https://www.textcontrol.com/blog/2021/04/23/esign-online-demo-contract-collaboration-workflows/llms.txt)
