This quickstart tutorial shows how to use the DocumentProcessing.DocumentEditor in an Angular application.

Prerequisites

1. Create your free trial token here:

   Create trial 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

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-editor-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-editor-app

3. Install the DS Server DocumentEditor package by typing in the following command:

   ng add @txtextcontrol/tx-ng-ds-document-editor

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.

   <tx-ds-document-editor
      width="1024px"
      height="1024px"
      serviceURL="https://trial.dsserver.io"
      oauthClientID="dsserver.u5NQQHkgjmCRAOeChUVc19zNFJ9aivKz"
      oauthClientSecret="tPGgkutg8oYuSHPbfuRfE5DMf9arUCEg"
      [userNames]="['user1', 'user2']">
   </tx-ds-document-editor>

6. Open the file src -> app -> app.component.ts and replace the complete file with the following code:

   import { Component, HostListener } from '@angular/core';
   
   declare const TXTextControl: any;
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   
   export class AppComponent {
     title = 'my-ds-editor-app';
   
     @HostListener('document:dsDocumentEditorLoaded')
   
     onDsDocumentEditorLoaded() {
       console.log('The TXTextControl object exists from now on.');
   
       TXTextControl.addEventListener("textControlLoaded", function() {
         var sel = TXTextControl.selection;
         sel.setText("Welcome to DS Server", function() {
           sel.setStart(11);
           sel.setLength(9);
           sel.setBold(true);
           sel.setFontSize(30);
         });
       });         
     }
   }

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

   ng serve --open