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
   cd designercomponent
   npm start

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

   npm install @grapecity/spread-excelio
   npm install @grapecity/spread-sheets
   npm install @grapecity/spread-sheets-barcode
   npm install @grapecity/spread-sheets-charts
   npm install @grapecity/spread-sheets-languagepackages
   npm install @grapecity/spread-sheets-pdf
   npm install @grapecity/spread-sheets-print
   npm install @grapecity/spread-sheets-shapes
   npm install @grapecity/spread-sheets-tablesheet
   npm install @grapecity/spread-sheets-pivot-addon
   npm install @grapecity/spread-sheets-designer
   npm install @grapecity/spread-sheets-designer-resources-en
   npm install @grapecity/spread-sheets-angular
   npm install @grapecity/spread-sheets-designer-angular

3. Import the designer and resources module in the app.module.ts file using the following code snippet.

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import '@grapecity/spread-sheets-designer-resources-en';
   import { DesignerModule } from '@grapecity/spread-sheets-designer-angular';
   @NgModule({
       declarations: [
          AppComponent
       ],
       imports: [
          BrowserModule,
          DesignerModule
       ],
       providers: [],
       bootstrap: [AppComponent]
   })
   export class AppModule { }

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

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

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

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

6. 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 '@grapecity/spread-sheets';
   import '@grapecity/spread-sheets-designer-resources-en';
   import * as GcDesigner from '@grapecity/spread-sheets-designer';
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css'],
       encapsulation: ViewEncapsulation.None
   })
   export class AppComponent {
       designer: any;
       spread: any;
       props = {
          styleInfo: 'width: 100%; height: 900px',
       };
   }

7. 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 designer initialized 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: 900px",
          config: null
       }
       afterDesignerInit(e: any) {
          //this is hosted spread instance
          var workbook = e.designer.getWorkbook();
          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, ExcelIO, and the Designer Component which can be done by using the following code snippet.

import '@grapecity/spread-sheets-designer-resources-en';
import * as GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-designer';
import * as ExcelIO from '@grapecity/spread-excelio';
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
(ExcelIO as any).LicenseKey = sjsLicense;
 
(GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key";