Products Technologies Demo Docs Blog Support Company

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.

Using Document Viewer Collaboration Features in Angular

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

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

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

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

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Angular

Integrate document processing, editing, sharing, collaboration, creation, electronic signatures, and PDF generation into your Angular Web applications.

Learn more about Angular

Related Posts

AngularASP.NETCollaboration

Collaboration: New Annotations Sample

We just published a new sample to our live demos that shows how to use the annotation feature of the online DocumentViewer. It shows how to load and save the annotations as separate JSON files.


AngularASP.NETBlazor

Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor…

This article shows how to create a backend for the Document Editor and Viewer using ASP.NET Core. The backend can be hosted on Windows and Linux and can be used in Blazor, Angular, JavaScript, and…


AngularJavaScriptDocument Viewer

Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0

This article shows how to use the TX Text Control Document Viewer version 33.0 npm package for Angular within an Angular CLI 19.0 application. It uses the trial backend running on our servers, but…


AngularJavaScriptAngular v18

Getting Started: Document Viewer with Angular CLI v18.0

This article shows how to use the TX Text Control Document Viewer npm package for Angular within an Angular CLI v18.0 application. It uses the trial backend running on our servers, but can also be…


AngularASP.NET CoreDocument Viewer

Getting Started Video Tutorial: How to use the Document Viewer in Angular

This video tutorial shows how to use the Document Viewer in an Angular application. This tutorial is part of the TX Text Control Getting Started series originally published on our YouTube channel.