This article explains how to use the Document Viewer Angular component together with TX Text Control .NET Server for ASP.NET 33.0.

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 for ASP.NET, or by creating a trial access token to use a hosted backend, valid for 30 days:

Creating the Angular Application

This tutorial shows how to create your first Angular application using the TX Text Control document editor.

Prerequisites

  1. Create your free trial access token here:

    Create Access Token

  2. Install Node.js and npm, if not done before.

  3. Open a Command Prompt and install the Angular CLI globally by typing in the following command:

    npm install -g @angular/cli

This tutorial uses Visual Studio Code that can be downloaded for free.

Creating the Angular Project

  1. Open a command prompt and create a new project and default application by typing the following command

    ng new my-viewer-app --no-standalone

    Follow the prompts, confirming CSS as your preferred stylesheet format and 'N' to disable server-side rendering and static page generation.

  2. Change to the folder that you created by typing the following command in the command prompt:

    cd my-viewer-app

  3. Run the following command to install the TX Text Control document editor package:

    npm i @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.module.ts, replace the complete content with the following code and save it:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { DocumentViewerModule } from '@txtextcontrol/tx-ng-document-viewer';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    DocumentViewerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    view raw test.ts hosted with ❤ by GitHub

  6. Open the file src -> app -> app.component.html, replace the complete content with the following code, replace yourtoken with your given Trial Access Token and save it:

    <tx-document-viewer
    width="800px"
    height="800px"
    basePath="https://backend.textcontrol.com?access-token=yourtoken"
    documentData="SGVsbG8gdGhlcmU="
    dock="Window"
    [toolbarDocked]="true"
    documentPath="test.docx"
    [isSelectionActivated]="true"
    [showThumbnailPane]="true">
    </tx-document-viewer>
    view raw test.html hosted with ❤ by GitHub

    Backend Server

    The code above uses a hosted demo backend server specified by the basePath property. If you are hosting your own required backend server, replace the URL with your backend endpoint.

  7. Back in the command prompt, start the Angular application by typing in the following command:

    ng serve --open