Angular

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

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

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

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';

Add the designer tag in the app.component.html file using the following code snippet.
```
<designer [props]="props"></designer>
```

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", 
    };
}

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:

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>
```

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');
    }
}

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";