Create a blank Angular and ASP.NET Core application.

Server side: Add references to the Vintasoft assemblies to "AngularApp1.Server" project.

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

• Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
  
• Add reference to the SkiaSharp nuget-package version 2.88.9.
• Open "Program.cs" file in "AngularApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
  
• Open "Program.cs" file in "AngularApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

Server side: Create web services, which allow to upload/download file and edit XLSX document.

• Add the "Controllers" folder to the project.

• 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:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
    
            public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to edit XLSX document

  • 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 "MyVintasoftOfficeApiController" and press the "Add" button
    
  • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class
    
    Here are source codes of MyVintasoftOfficeApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
        {
            public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

Server side: Create CORS-policy that allows to access web services from client side.

• Open the "Program.cs" file in "AngularApp1.Server" project and add code that:
  • Creates CORS-policy that allows to access web services from "localhost"
  • Enables CORS usage in "AngularApp1.Server" project
  
  Here are source codes of "Program.cs" file after update:
  
  • C#

  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  
  builder.Services.AddControllers();
  
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: "CorsPolicy1", policy =>
      {
          policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
      });
  });
  
  var app = builder.Build();
  
  app.UseDefaultFiles();
  app.UseStaticFiles();
  
  // Configure the HTTP request pipeline.
  
  app.UseHttpsRedirection();
  
  app.UseAuthorization();
  
  app.UseCors("CorsPolicy1");
  
  app.MapControllers();
  
  app.MapFallbackToFile("/index.html");
  
  app.Run();
  
  

Server side: Update launch URL in 'launchSettings.json' file.

• Open file "Properties\launchSettings.json" in "AngularApp1.Server" and clear launch URL:
  

Server side: Copy the default test XLSX document to a server side.

• Create folder "UploadedImageFiles\SessionID" in "AngularApp1.Server" project and copy test XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\UploadedImageFiles\SalesReport.xlsx" to the "UploadedImageFiles\SessionID" folder. This document will be displayed in spreadsheet document editor.
  
  
• Create folder "Resources" in "AngularApp1.Server" project and copy XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\Resources\ChartSource.xlsx" to the "Resources" folder. This document will be used as a source for "standard" charts when chart is adding to spreadsheet document using "Add chart" dialog.

Compile the project for restoring dependencies using 'npm'.

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

• Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "AngularApp1.Server" project - the WeatherForecast Web API controller is not necessary in this tutorial.
  
  
• Delete files "src\app\app.component.css", "src\app\app.component.html", "src\app\app.component.spec.ts", "src\app\app.component.ts" in "angularapp1.client" project - this Angular-component is not necessary in this tutorial.

Client side: Add JavaScript files and TypeScript modules to the "angularapp1.client" project.

• Add the "assets" folder to the "src\app\" folder.
  
  
• Copy Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Office.js and Vintasoft.Imaging.Office.d.ts files from "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the "src\app\assets\" folder.
  
  
• Specify, which "standard" UI dialogs (rename worksheet dialog, find text dialog, etc) should be used by web spreadsheet document editor
  • If web spreadsheet document editor should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "angularapp1.client",
        "version": "0.0.0",
        "scripts": {
          "ng": "ng",
          "start": "run-script-os",
          "build": "ng build",
          "watch": "ng build --watch --configuration development",
          "test": "ng test",
          "prestart": "node aspnetcore-https",
          "start:windows": "ng serve --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\" --host=127.0.0.1",
          "start:default": "ng serve --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\" --host=127.0.0.1"
        },
        "private": true,
        "dependencies": {
          "@angular/animations": "^18.0.0",
          "@angular/common": "^18.0.0",
          "@angular/compiler": "^18.0.0",
          "@angular/core": "^18.0.0",
          "@angular/forms": "^18.0.0",
          "@angular/platform-browser": "^18.0.0",
          "@angular/platform-browser-dynamic": "^18.0.0",
          "@angular/router": "^18.0.0",
          "bootstrap": "5.3.3",
          "rxjs": "~7.8.0",
          "tslib": "^2.3.0",
          "zone.js": "~0.14.3",
          "jest-editor-support": "*",
          "run-script-os": "*"
        },
        "devDependencies": {
          "@angular-devkit/build-angular": "^18.0.3",
          "@angular/cli": "^18.0.3",
          "@angular/compiler-cli": "^18.0.0",
          "@types/jasmine": "~5.1.0",
          "jasmine-core": "~5.1.0",
          "karma": "~6.4.0",
          "karma-chrome-launcher": "~3.2.0",
          "karma-coverage": "~2.2.0",
          "karma-jasmine": "~5.1.0",
          "karma-jasmine-html-reporter": "~2.1.0",
          "typescript": "~5.4.2"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Dialogs.Bootstrap.d.ts, Vintasoft.Imaging.Office.Dialogs.Bootstrap.js and Vintasoft.Imaging.Office.Dialogs.Bootstrap.d.ts files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web spreadsheet document editor should use ready-to-use "standard" jQuery UI dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js, Vintasoft.Imaging.Dialogs.jQueryUI.d.ts, Vintasoft.Imaging.Office.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.d.ts files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web spreadsheet document editor should use custom "standard" dialogs (for example, Angular+Bootstrap dialogs), please read how to create custom "standard" dialogs here.
    
    
• Add references to used JavaScript libraries to the "projects => Demo => architect => build => options => scripts" section in "angular.json" file, add references to used CSS-files to the "projects => Demo => architect => build => options => styles" section in "angular.json" file.
  Here are source codes of "angular.json" file:
  
  • JSON

  {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "angularapp1.client": {
        "projectType": "application",
        "schematics": {
          "@schematics/angular:component": {
            "standalone": false
          },
          "@schematics/angular:directive": {
            "standalone": false
          },
          "@schematics/angular:pipe": {
            "standalone": false
          }
        },
        "root": "",
        "sourceRoot": "src",
        "prefix": "app",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:application",
            "options": {
              "outputPath": "dist/angularapp1.client",
              "index": "src/index.html",
              "browser": "src/main.ts",
              "polyfills": [
                "zone.js"
              ],
              "tsConfig": "tsconfig.app.json",
              "assets": [
                {
                  "glob": "**/*",
                  "input": "public"
                }
              ],
              "styles": [
                "node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/styles.css",
                "src/Vintasoft.Imaging.css",
                "src/Vintasoft.Imaging.Office.css"
              ],
              "scripts": [
                "src/app/assets/Vintasoft.Shared.js",
                "src/app/assets/Vintasoft.Imaging.js",
                "src/app/assets/Vintasoft.Imaging.Dialogs.Bootstrap.js",
                "src/app/assets/Vintasoft.Imaging.Office.js",
                "src/app/assets/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js"
              ]
            },
            "configurations": {
              "production": {
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "500kB",
                    "maximumError": "1MB"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "2kB",
                    "maximumError": "4kB"
                  }
                ],
                "outputHashing": "all"
              },
              "development": {
                "optimization": false,
                "extractLicenses": false,
                "sourceMap": true
              }
            },
            "defaultConfiguration": "production"
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "configurations": {
              "production": {
                "buildTarget": "angularapp1.client:build:production"
              },
              "development": {
                "buildTarget": "angularapp1.client:build:development"
              }
            },
            "defaultConfiguration": "development",
            "options": {
              "proxyConfig": "src/proxy.conf.js"
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n"
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "polyfills": [
                "zone.js",
                "zone.js/testing"
              ],
              "tsConfig": "tsconfig.spec.json",
              "assets": [
                {
                  "glob": "**/*",
                  "input": "public"
                }
              ],
              "styles": [
                "src/styles.css"
              ],
              "scripts": [],
              "karmaConfig": "karma.conf.js"
            }
          }
        }
      }
    }
  }
  
  

  
  
• Copy files "Vintasoft.Imaging.css" and "Vintasoft.Imaging.Office.css" with CSS-styles of Vintasoft web spreadsheet document editor from "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Bin\JavaScript\" folder to the "src\" folder.
  Add information about Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css files to the "styles" section of "app\angular.json" file.

Client side: Create Angular-component that allows to display and edit spreadsheet document.

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

  <h1>VintaSoft Spreadsheet Document Editor (Angular + ASP.NET Core)</h1>
  
  <div id="spreadsheetDocumentEditorContainer" class="spreadsheetDocumentEditorContainer"></div>
  
  

  
  
• Create "spreadsheet-document-editor-demo.css" file that will contain CSS-styles of Angular-component:
  • Select "Add => New Item..." context menu for folder "src\app\" => "Add new item" dialog will appear
  • Select "StyleSheet" type for new item
  • Set "spreadsheet-document-editor-demo.css" as element name
  • Click the "Add" button => dialog will be closed and file "spreadsheet-document-editor-demo.css" will be added into folder "src\app\"
  
  Add CSS-styles to the "spreadsheet-document-editor-demo.css" file:
  
  
  Here is CSS-code of "spreadsheet-document-editor-demo.css" file:
  
  • HTML

  h1 {
    text-align: center;
  }
  
  .spreadsheetDocumentEditorContainer {
    height: 800px;
  }
  
  

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

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './spreadsheet-document-editor-demo.html',
    styleUrl: './spreadsheet-document-editor-demo.css'
  })
  export class SpreadsheetDocumentEditorDemo implements OnInit {
    constructor() { }
  
    ngOnInit() {
      // set the session identifier
      Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionId");
  
      // specify web services, which should be used in this demo
      Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7015/vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7015/vintasoft/api/MyVintasoftOfficeApi");
  
      // create the spreadsheet document editor control settings
      var spreadsheetDocumentEditorControlSettings = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorContainer", "");
  
      // create the spreadsheet document editor control
      var spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
  
      // subscribe to the "warningOccured" event of spreadsheet document editor control
      Vintasoft.Shared.subscribeToEvent(spreadsheetDocumentEditorControl, "warningOccured", this.__spreadsheetDocumentEditorControl_warningOccured);
  
      var fileId = "SalesReport.xlsx";
      // copy the file from global folder to the session folder
      spreadsheetDocumentEditorControl.openDocument(fileId);
    }
  
    __spreadsheetDocumentEditorControl_warningOccured(event: any, eventArgs: any) {
      // show the error message
      alert(eventArgs.message);
    }
  
    title = 'VintaSoft Angular Spreadsheet Document Editor Demo';
  }
  
  

  
  
• Add created Angular-component to the Angular-application module - "src\app\app.module.ts" file.
  Here are source codes of "app.module.ts" file after update:
  
  
  Here are source codes of "app.module.ts" file after update:
  
  • TYPESCRIPT

  import { HttpClientModule } from '@angular/common/http';
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppRoutingModule } from './app-routing.module';
  import { SpreadsheetDocumentEditorDemo } from './spreadsheet-document-editor-demo';
  
  @NgModule({
    declarations: [
      SpreadsheetDocumentEditorDemo
    ],
    imports: [
      BrowserModule, HttpClientModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [SpreadsheetDocumentEditorDemo]
  })
  export class AppModule { }
  
  

  
  

Run the Angular and ASP.NET Core application and see the result.