# Angular

A tutorial showing how to add the SpreadJS Designer Component to an Angular app, including code examples

## Content

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**.

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

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

    ```TypeScript
    @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.

    ```TypeScript
    <designer [props]="props"></designer>
    ```
5. To configure the designer, you may pass the `props` parameters as shown below in the **app.component.ts** file.

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

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

    ```TypeScript
    <designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>
    ```
2. Update the **app.component.ts** file using the following code snippet.

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

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

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