Angular

You can perform the following steps to add the SpreadJS Designer Component to an Angular application:

1. Create an Angular project by typing the following commands in Command Prompt.

   npm install -g @angular/cli
   ng new designercomponent --style css --ssr false
   cd designercomponent

2. Import the following SpreadJS modules in the project to use SpreadJS Designer Component.

   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-angular
   npm install @mescius/spread-sheets-shapes
   npm install @mescius/spread-sheets-charts
   npm install @mescius/spread-sheets-slicers
   npm install @mescius/spread-sheets-print
   npm install @mescius/spread-sheets-formula-panel
   npm install @mescius/spread-sheets-barcode
   npm install @mescius/spread-sheets-pdf
   npm install @mescius/spread-sheets-pivot-addon
   npm install @mescius/spread-sheets-tablesheet
   npm install @mescius/spread-sheets-ganttsheet
   npm install @mescius/spread-sheets-reportsheet-addon
   npm install @mescius/spread-sheets-languagepackages
   npm install @mescius/spread-sheets-io
   npm install @mescius/spread-excelio
   npm install @mescius/spread-sheets-designer
   npm install @mescius/spread-sheets-designer-resources-en
   npm install @mescius/spread-sheets-designer-angular

3. Import CSS file in the app.component.css file using the following code snippet.

   @import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
   @import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

4. Add the designer tag in the app.component.html file using the following code snippet.

   <designer [props]="props"></designer>

5. To configure the designer, you may pass the props parameters as shown below in the app.component.ts file.

   import { Component, ViewEncapsulation } from '@angular/core';
   import * as GC from '@mescius/spread-sheets';
   import "@mescius/spread-sheets-shapes";
   import "@mescius/spread-sheets-charts";
   import "@mescius/spread-sheets-slicers";
   import "@mescius/spread-sheets-print";
   import "@mescius/spread-sheets-formula-panel";
   import "@mescius/spread-sheets-barcode";
   import "@mescius/spread-sheets-pdf";
   import "@mescius/spread-sheets-pivot-addon";
   import "@mescius/spread-sheets-tablesheet";
   import "@mescius/spread-sheets-ganttsheet";
   import "@mescius/spread-sheets-reportsheet-addon";
   import "@mescius/spread-sheets-io";
   import '@mescius/spread-sheets-designer-resources-en';
   import '@mescius/spread-sheets-designer';
   import * as GcDesigner from '@mescius/spread-sheets-designer';
   import { DesignerModule } from '@mescius/spread-sheets-designer-angular';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [DesignerModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     encapsulation: ViewEncapsulation.None
   })
   export class AppComponent {
       props = {
          stylelnfo: "width: 100%; height: 98vh; margin-top: 10px", 
       };
   }

6. Save and run the application.

   npm start

Access SpreadJS instance

You can also access the SpreadJS instance by using designerInitialized event. Follow steps 1 to 4 as listed above and continue:

1. Add an event listener to the designerInitialized event in the app.component.html file using the following code snippet.

   <designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>

2. Update the app.component.ts file using the following code snippet.

   export class AppComponent {
       props = {
          styleInfo: "width: 100%; height: 700px",
          config: null
       }
       afterDesignerInit(e: { designer:GcDesigner.Spread.Sheets.Designer.Designer }) {
         
          // this is hosted spread instance
          var workbook = e.designer.getWorkbook() as GC.Spread.Sheets.Workbook;
          var sheet = workbook.getActiveSheet();
          sheet.setValue(1, 1, 'Test');
       }
   }

3. Save and run the application.

   npm start

Apply License

The licensed version allows you to use all the features of the SpreadJS Designer Component. You need to set the license key for SpreadJS and the Designer Component which can be done by using the following code snippet.

import { Component, ViewEncapsulation } from '@angular/core';
import * as GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-slicers";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-barcode";
import "@mescius/spread-sheets-pdf";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-io";
import '@mescius/spread-sheets-designer-resources-en';
import '@mescius/spread-sheets-designer';
import * as GcDesigner from '@mescius/spread-sheets-designer';
import { DesignerModule } from '@mescius/spread-sheets-designer-angular';
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
 
(GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key";