This quickstart tutorial shows how to use the DocumentProcessing.DocumentViewer in an Angular application.
Prerequisites
-
Create your free trial token here:
-
Install Node.js?? and npm, if not done before.
-
Open a Command Prompt and install the Angular CLI globally by typing in the following command:
npm install -g @angular/cli
Creating the Project
-
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.
-
Change into the created folder by typing in the following command:
cd my-ds-viewer-app -
Install the DS Server DocumentViewer package by typing in the following command:
ng add @txtextcontrol/tx-ng-ds-document-viewer -
Open this folder in Visual Studio Code by typing in the following command:
code . -
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters<tx-ds-document-viewer width="1280px" height="1024px" serviceURL="https://trial.dsserver.io" documentData="SGVsbG8gdGhlcmU=" oauthClientID="dsserver.PdRpDAnzGLRrTPhRnYBU2UAEkzyB4PQ1" oauthClientSecret="HgpGyqoFQOVkrzk6ukHtSxUS6XdU39LP"> </tx-ds-document-viewer> -
Open the file src -> app -> app.module.ts and replace the complete file with the following code to import the required HttpClientModule:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersimport { 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 { } -
Back in the command prompt, start the Angular application by typing in the following command:
ng serve --open