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-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 = { styleInfo: "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";

Limitation

When building an Angular application with SpreadJS packages (including the SpreadJS Designer Component), you may encounter an error message "An unhandled exception occurred: Map maximum size exceeded." This issue occurs only when the Angular application uses localization and is built with the ESbuild bundler. It happens because the SpreadJS packages are in CommonJS format, and ESbuild does not support tree-shaking for CommonJS modules.