VintaSoft Imaging .NET SDK 12.4: Documentation for Web developer
In This Topic
    Add web document viewer to an ASP.NET Core application with Angular
    In This Topic
    This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2022 and add document viewer (with ability to open images and documents (PDF, DOCX, XLSX), extract/search text, annotate documents) to ASP.NET Core application with Angular.


    Here are steps, which must be done:
    1. Create a blank ASP.NET Core Web application.

      Open Visual Studio .NET 2022 and create a new project, of "ASP.NET Core with Angular" type:

      Configure the project to use .NET 8.0:

    2. Server side: Add references to the Vintasoft assemblies to your ASP.NET Core Web application.

      Copy Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Annotation.dll, Vintasoft.Imaging.Annotation.Pdf.dll, Vintasoft.Imaging.Office.OpenXml, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Annotation.Web.Services.dll, Vintasoft.Imaging.AspNetCore.ApiControllers.dll and Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET v12.4\Bin\DotNet8\AnyCPU\" directory to the "Bin" directory of ASP.NET Core Web application and add references to assemblies in ASP.NET Core Web application.



    3. Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

      If ASP.NET application must be used in Windows or Linux, SkiaSharp drawing engine should be used.
      If ASP.NET application must be used in Windows only, System.Drawing or SkiaSharp drawing engine should be used.

      Here are steps, which should be made for using SkiaSharp engine:
      • Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
      • Add reference to the SkiaSharp nuget-package version 2.88.6.
      • Open "Startup.cs" file, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of ConfigureServices method - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

      Here are steps, which should be made for using System.Drawing engine:
      • Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
      • Open "Startup.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of ConfigureServices method - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

    4. Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, extract/search text and annotate document.

      • Create web service that allows to upload/download file

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
        • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class

          Here are source codes of MyVintasoftFileApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
              {
          
                  public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Create web service that allows to manage image collection

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
        • Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class

          Here are source codes of MyVintasoftImageCollectionApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
              {
          
                  public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Create web service that allows to get information about images, get thumbnails, render image tiles, extract/search text

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
        • Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class

          Here are source codes of MyVintasoftImageApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
              {
          
                  public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Create web service that allows to annotate images and documents

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftAnnotationCollectionApiController" and press the "Add" button
        • Specify that MyVintasoftAnnotationCollectionApiController class is derived from Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController class

          Here are source codes of MyVintasoftAnnotationCollectionApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftAnnotationCollectionApiController :
                  Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController
              {
          
                  public MyVintasoftAnnotationCollectionApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
              }
          }
          
          
    5. Server side: Add Newtonsoft JSON for deserialization of JSON annotations.

      Add reference to the Microsoft.AspNetCore.Mvc.NewtonsoftJson nuget-package.

      Open the "Startup.cs" file and add code line "services.AddControllersWithViews().AddNewtonsoftJson();" at the beginning of ConfigureServices method. This is necessary for correct deserialization of JSON annotations.

      Here are source codes of Startup.ConfigureServices method:
      using Microsoft.AspNetCore.Builder;
      using Microsoft.AspNetCore.Hosting;
      using Microsoft.AspNetCore.SpaServices.AngularCli;
      using Microsoft.Extensions.Configuration;
      using Microsoft.Extensions.DependencyInjection;
      using Microsoft.Extensions.Hosting;
      
      namespace WebApplication1
      {
          public class Startup
          {
              public Startup(IConfiguration configuration)
              {
                  Configuration = configuration;
              }
      
              public IConfiguration Configuration { get; }
      
              // This method gets called by the runtime. Use this method to add services to the container.
              public void ConfigureServices(IServiceCollection services)
              {
                  // specify that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics
                  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
      
                  // add Newtonsoft JSON for deserialization of JSON annotations
                  services.AddControllersWithViews().AddNewtonsoftJson();
      
                  // In production, the Angular files will be served from this directory
                  services.AddSpaStaticFiles(configuration =>
                  {
                      configuration.RootPath = "ClientApp/dist";
                  });
              }
      
              // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
              public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
              {
                  if (env.IsDevelopment())
                  {
                      app.UseDeveloperExceptionPage();
                  }
                  else
                  {
                      app.UseExceptionHandler("/Error");
                      // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                      app.UseHsts();
                  }
      
                  app.UseHttpsRedirection();
                  app.UseStaticFiles();
                  if (!env.IsDevelopment())
                  {
                      app.UseSpaStaticFiles();
                  }
      
                  app.UseRouting();
      
                  app.UseEndpoints(endpoints =>
                  {
                      endpoints.MapControllerRoute(
                          name: "default",
                          pattern: "{controller}/{action=Index}/{id?}");
                  });
      
                  app.UseSpa(spa =>
                  {
                      // To learn more about options for serving an Angular SPA from ASP.NET Core,
                      // see https://go.microsoft.com/fwlink/?linkid=864501
      
                      spa.Options.SourcePath = "ClientApp";
      
                      if (env.IsDevelopment())
                      {
                          spa.UseAngularCliServer(npmScript: "start");
                      }
                  });
              }
          }
      }
      
      
    6. Compile the project for restoring dependencies using 'npm'.

    7. Client side: Delete files, which are not necessary in this demo.

      Delete directories "ClientApp\src\app\counter\", "ClientApp\src\app\fetch-data\", "ClientApp\src\app\home\", "ClientApp\src\app\nav-menu\" - these Angular components are not necessary in this demo.

      Open file "ClientApp\src\app\app.component.html" and delete line "<app-nav-menu></app-nav-menu>" from HTML markup - this demo does not need navigation menu.

      Open file "ClientApp\src\app\app.module.ts" and delete code that uses the following Angular components: NavMenuComponent, HomeComponent, CounterComponent, FetchDataComponent - these Angular components are not necessary in this demo.
      Here are source codes of "app.module.ts" file after update:
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { FormsModule } from '@angular/forms';
      import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
      import { RouterModule } from '@angular/router';
      
      import { AppComponent } from './app.component';
      
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
          HttpClientModule,
          FormsModule,
          RouterModule.forRoot([
          ])
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
      
      
    8. Client side: Add JavaScript files and TypeScript modules to the ASP.NET Core Web application.

      • Add the "assets" folder to the "ClientApp\src\app\" folder.

      • Copy Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Annotation.js, Vintasoft.Imaging.Annotation.d.ts, Vintasoft.Imaging.DocumentViewer.js and Vintasoft.Imaging.DocumentViewer.d.ts files from "<SdkInstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder to the "ClientApp\src\app\assets\" folder.


      • Specify, which "standard" dialogs (password dialog, print dialog, etc) should be used by web document viewer
        • If web document viewer should use ready-to-use "standard" Bootstrap dialogs:
          • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Dialogs.Bootstrap.d.ts, Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js and Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.d.ts files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "ClientApp\src\app\assets\" folder.
        • If web document viewer should use ready-to-use "standard" jQuery UI dialogs:
          • Add jQuery UI to the project:
            • Open command line and go to the "ClientApp\" folder.
            • Execute command "npm install jquery-ui-dist" in command line for installing "jquery-ui-dist" npm-package. Files of jQuery UI will installed in "ClientApp\node_modules\jquery-ui-dist\" folder.
          • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js, Vintasoft.Imaging.Dialogs.jQueryUI.d.ts, Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.d.ts files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "ClientApp\src\app\assets\" folder.
        • If web document viewer should use custom "standard" dialogs (for example, Angular+Bootstrap dialogs), please read how to create custom "standard" dialogs here.

      • Set "Build Action" to the "TypeScript file" for Vintasoft.Shared.d.ts, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Annotation.d.ts, Vintasoft.Imaging.DocumentViewer.d.ts and Vintasoft.Imaging.DocumentViewer.Dialogs.XXX.d.ts files:


      • Add references to used JavaScript libraries to the "projects => Demo => architect => build => options => scripts" section in "ClientApp\angular.json" file:
        • If web document viewer should use ready-to-use "standard" Bootstrap dialogs, add references to the Vintasoft JavaScript files to the "projects => Demo => architect => build => options => scripts" section in "ClientApp\angular.json" file:
          {
            "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
            "version": 1,
            "newProjectRoot": "projects",
            "projects": {
              "Project1": {
                "root": "",
                "sourceRoot": "src",
                "projectType": "application",
                "prefix": "app",
                "schematics": {},
                "architect": {
                  "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                      "progress": false,
                      "extractCss": true,
                      "outputPath": "dist",
                      "index": "src/index.html",
                      "main": "src/main.ts",
                      "polyfills": "src/polyfills.ts",
                      "tsConfig": "src/tsconfig.app.json",
                      "assets": ["src/assets"],
                      "styles": [
                        "node_modules/bootstrap/dist/css/bootstrap.min.css",
                        "src/styles.css",
                        "src/Vintasoft.Imaging.DocumentViewer.css"
                      ],
                      "scripts": [
                        "src/app/assets/Vintasoft.Shared.js",
                        "src/app/assets/Vintasoft.Imaging.js",
                        "src/app/assets/Vintasoft.Imaging.Annotation.js",
                        "src/app/assets/Vintasoft.Imaging.DocumentViewer.js",
                        "src/app/assets/Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js"
                      ]
                    },
                    "configurations": {
                      "production": {
                        "fileReplacements": [
                          {
                            "replace": "src/environments/environment.ts",
                            "with": "src/environments/environment.prod.ts"
                          }
                        ],
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "extractCss": true,
                        "namedChunks": false,
                        "aot": true,
                        "extractLicenses": true,
                        "vendorChunk": false,
                        "buildOptimizer": true
                      }
                    }
                  },
                  "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                      "browserTarget": "Project1:build"
                    },
                    "configurations": {
                      "production": {
                        "browserTarget": "Project1:build:production"
                      }
                    }
                  },
                  "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                      "browserTarget": "Project1:build"
                    }
                  },
                  "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                      "main": "src/test.ts",
                      "polyfills": "src/polyfills.ts",
                      "tsConfig": "src/tsconfig.spec.json",
                      "karmaConfig": "src/karma.conf.js",
                      "styles": ["src/styles.css"],
                      "scripts": [],
                      "assets": ["src/assets"]
                    }
                  },
                  "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                      "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
                      "exclude": ["**/node_modules/**"]
                    }
                  },
                  "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                      "outputPath": "dist-server",
                      "main": "src/main.ts",
                      "tsConfig": "src/tsconfig.server.json"
                    },
                    "configurations": {
                      "dev": {
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "namedChunks": false,
                        "extractLicenses": true,
                        "vendorChunk": true
                      },
                      "production": {
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "namedChunks": false,
                        "extractLicenses": true,
                        "vendorChunk": false
                      }
                    }
                  }
                }
              },
              "Project1-e2e": {
                "root": "e2e/",
                "projectType": "application",
                "architect": {
                  "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                      "protractorConfig": "e2e/protractor.conf.js",
                      "devServerTarget": "Project1:serve"
                    }
                  },
                  "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                      "tsConfig": "e2e/tsconfig.e2e.json",
                      "exclude": ["**/node_modules/**"]
                    }
                  }
                }
              }
            },
            "defaultProject": "Project1"
          }
          
          
        • If web document viewer should use ready-to-use "standard" jQuery UI dialogs, add references to the jQuery and Vintasoft JavaScript files to the "projects => Demo => architect => build => options => scripts" section in "ClientApp\angular.json" file:
          {
            "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
            "version": 1,
            "newProjectRoot": "projects",
            "projects": {
              "Project1": {
                "root": "",
                "sourceRoot": "src",
                "projectType": "application",
                "prefix": "app",
                "schematics": {},
                "architect": {
                  "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                      "progress": false,
                      "extractCss": true,
                      "outputPath": "dist",
                      "index": "src/index.html",
                      "main": "src/main.ts",
                      "polyfills": "src/polyfills.ts",
                      "tsConfig": "src/tsconfig.app.json",
                      "assets": ["src/assets"],
                      "styles": [
                        "node_modules/bootstrap/dist/css/bootstrap.min.css",
                        "./node_modules/jquery-ui-dist/jquery-ui.min.css",
                        "src/styles.css",
                        "src/Vintasoft.Imaging.DocumentViewer.css"
                      ],
                      "scripts": [
                        "./node_modules/jquery/dist/jquery.js",
                        "./node_modules/jquery-ui-dist/jquery-ui.min.js",
                        "src/app/assets/Vintasoft.Shared.js",
                        "src/app/assets/Vintasoft.Imaging.js",
                        "src/app/assets/Vintasoft.Imaging.Annotation.js",
                        "src/app/assets/Vintasoft.Imaging.DocumentViewer.js",
                        "src/app/assets/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js"
                      ]
                    },
                    "configurations": {
                      "production": {
                        "fileReplacements": [
                          {
                            "replace": "src/environments/environment.ts",
                            "with": "src/environments/environment.prod.ts"
                          }
                        ],
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "extractCss": true,
                        "namedChunks": false,
                        "aot": true,
                        "extractLicenses": true,
                        "vendorChunk": false,
                        "buildOptimizer": true
                      }
                    }
                  },
                  "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                      "browserTarget": "Project1:build"
                    },
                    "configurations": {
                      "production": {
                        "browserTarget": "Project1:build:production"
                      }
                    }
                  },
                  "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                      "browserTarget": "Project1:build"
                    }
                  },
                  "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                      "main": "src/test.ts",
                      "polyfills": "src/polyfills.ts",
                      "tsConfig": "src/tsconfig.spec.json",
                      "karmaConfig": "src/karma.conf.js",
                      "styles": ["src/styles.css"],
                      "scripts": [],
                      "assets": ["src/assets"]
                    }
                  },
                  "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                      "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
                      "exclude": ["**/node_modules/**"]
                    }
                  },
                  "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                      "outputPath": "dist-server",
                      "main": "src/main.ts",
                      "tsConfig": "src/tsconfig.server.json"
                    },
                    "configurations": {
                      "dev": {
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "namedChunks": false,
                        "extractLicenses": true,
                        "vendorChunk": true
                      },
                      "production": {
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "namedChunks": false,
                        "extractLicenses": true,
                        "vendorChunk": false
                      }
                    }
                  }
                }
              },
              "Project1-e2e": {
                "root": "e2e/",
                "projectType": "application",
                "architect": {
                  "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                      "protractorConfig": "e2e/protractor.conf.js",
                      "devServerTarget": "Project1:serve"
                    }
                  },
                  "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                      "tsConfig": "e2e/tsconfig.e2e.json",
                      "exclude": ["**/node_modules/**"]
                    }
                  }
                }
              }
            },
            "defaultProject": "Project1"
          }
          
          

    9. Client side: Create Angular component that allows to display document, search and extract text from document, annotate document.

      • Create folder "wwwroot\UploadedImageFiles\SessionID" and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET v12.4\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.

      • Create folder "ClientApp\src\app\document-viewer-demo\".

      • Copy "Vintasoft.Imaging.DocumentViewer.css" file with CSS-styles of Vintasoft web document viewer from "<SdkInstallPath>\VintaSoft\Imaging .NET v12.4\Bin\JavaScript\" folder to the "ClientApp\src\" folder.
        Add information about "Vintasoft.Imaging.DocumentViewer.css" file to the "styles" section of "Client\app\angular.json" file.

      • Create "document-viewer-demo.html" file that will contain HTML markup of Angular component:
        • Select "Add => New Item..." context menu for folder "ClientApp\src\app\document-viewer-demo\" => "Add new item" dialog will appear
        • Select "HTML Page" type for new item
        • Set "document-viewer-demo.html" as element name
        • Click the "Add" button => dialog will be closed and file "document-viewer-demo.html" will be added into folder "ClientApp\src\app\document-viewer-demo\"

        Add HTML markup (demo header and div element for document viewer) to the "document-viewer-demo.html" file:
        <h1>VintaSoft Document Viewer Demo (Angular + ASP.NET Core)</h1>
        
        <div id="documentViewerContainer" style="height:800px"></div>
        
        



      • Create "document-viewer-demo.ts" file that will contain code of Angular component:
        • Select "Add => New Item..." context menu for folder "ClientApp\src\app\document-viewer-demo\" => "Add new item" dialog will appear
        • Select "TypeScript File" type for new item
        • Set "document-viewer-demo.ts" as element name
        • Click the "Add" button => dialog will be closed and file "document-viewer-demo.ts" will be added into folder "ClientApp\src\app\document-viewer-demo\"

        Add TypeScript code to the "document-viewer-demo.ts" file:
        import { Component } from '@angular/core';
        
        @Component({
          selector: 'document-viewer-demo',
          templateUrl: './document-viewer-demo.html',
        })
        export class DocumentViewerDemo {
        
          constructor() {
          }
        
        
          /**
           * Component is initializing.
           */
          ngOnInit() {
            // set the session identifier
            Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
        
            // specify web services, which should be used by Vintasoft Web Document Viewer
            Vintasoft.Shared.WebServiceJS.defaultFileService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
            Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageCollectionApi");
            Vintasoft.Shared.WebServiceJS.defaultImageService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageApi");
            Vintasoft.Shared.WebServiceJS.defaultAnnotationService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftAnnotationCollectionApi");
        
            // create settings for document viewer with annotation support
            let docViewerSettings: Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS =
              new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });
        
            // get items of document viewer
            let items: Vintasoft.Imaging.DocumentViewer.UIElements.WebUiElementCollectionJS = docViewerSettings.get_Items();
        
            // get the main menu of document viewer
            let mainMenu: Vintasoft.Imaging.DocumentViewer.Panels.WebUiPanelContainerJS =
              items.getItemByRegisteredId("mainMenu") as Vintasoft.Imaging.DocumentViewer.Panels.WebUiPanelContainerJS;
            // if main menu is found
            if (mainMenu != null) {
              // get items of main menu
              let mainMenuItems: Vintasoft.Imaging.DocumentViewer.UIElements.WebUiElementCollectionJS = mainMenu.get_Items();
        
              // add "Annotation" menu panel to the main menu
              mainMenuItems.addItem("annotationsMenuPanel");
            }
        
            // get side panel of document viewer
            let sidePanel: Vintasoft.Imaging.DocumentViewer.Panels.WebUiSidePanelJS =
              items.getItemByRegisteredId("sidePanel") as Vintasoft.Imaging.DocumentViewer.Panels.WebUiSidePanelJS;
            // if side panel is found
            if (sidePanel != null) {
              // get items of side panel
              let sidePanelItems: Vintasoft.Imaging.DocumentViewer.UIElements.WebUiElementCollectionJS =
                sidePanel.get_PanelsCollection();
        
              // add "Annotations" panel to the side panel
              sidePanelItems.addItem("annotationsPanel");
        
              // add "Text selection" panel to the side panel
              sidePanelItems.addItem("textSelectionPanel");
        
              // add "Text searh" panel to the side panel
              sidePanelItems.addItem("textSearchPanel");
            }
        
            // create the document viewer
            let docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
        
            // create visual tool that allows to work with annotations, navigate document and select text
            let annotationNavigationTextSelectionTool: Vintasoft.Imaging.UI.VisualTools.WebVisualToolJS =
              docViewer.getVisualToolById("AnnotationVisualTool,DocumentNavigationTool,TextSelectionTool");
            // specify visual tool as mandatory visual tool of document viewer
            docViewer.set_MandatoryVisualTool(annotationNavigationTextSelectionTool);
            // specify visual tool as current visual tool of document viewer
            docViewer.set_CurrentVisualTool(annotationNavigationTextSelectionTool);
        
            // get image viewer of document viewer
            let imageViewer: Vintasoft.Imaging.UI.WebImageViewerJS = docViewer.get_ImageViewer();
            // open file from session folder and add images from file to the image viewer
            imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
          }
        
        }
        
        



      • Add created Angular component to the Angular application module - "ClientApp\src\app\app.module.ts" file.
        Here are source codes of "app.module.ts" file after update:
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { FormsModule } from '@angular/forms';
        import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
        import { RouterModule } from '@angular/router';
        
        import { AppComponent } from './app.component';
        import { DocumentViewerDemo } from './document-viewer-demo/document-viewer-demo';
        
        @NgModule({
          declarations: [
            AppComponent,
            DocumentViewerDemo
          ],
          imports: [
            BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
            HttpClientModule,
            FormsModule,
            RouterModule.forRoot([
              { path: '', component: DocumentViewerDemo, pathMatch: 'full' },
            ])
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
        
        

    10. Run the ASP.NET Core Web application with Angular and see the result.