# SpreadJS with Angular

## Content

SpreadJS supports Angular, which is a web application framework that uses TypeScript on the client-side.

> **Note:** SpreadJS supports Angular versions 11, 12, 13, 14, 15, 16, and 17.
> Angular version 13 has removed the support of IE11.

SpreadJS can be used in an Angular project in the following way:

## Using Node Package Manager

This method involves the following steps:

1. **Install the Angular CLI globally**
    Open the **Command Prompt** window and type the following command:

    ```Shell
    npm install -g @angular/cli
    ```
2. **Create a new project using Angular CLI**
    Create a new project using the following command and navigate to the project directory:

    ```Shell
    ng new spread-sheets-angular-cli --style css --ssr false
    cd spread-sheets-angular-cli
    ```
3. **Install SpreadJS NPM package**
    Install the SpreadJS NPM package using the following commands:

    ```Shell
    npm install @mescius/spread-sheets
    npm install @mescius/spread-sheets-angular
    ```
4. **Configure SpreadJS CSS in angular.json**
    Configure the SpreadJS CSS in **angular.json** as shown below:

    ```JSON
    {
      ...
      "projects":{
        "spread-sheets-angular-cli":{
          ...
          "architect":{
            ...
            "build":{
              ...
              "options":{
                ...
                "styles": [
                  "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
                ],
                ...
              }
              ...
            }
            ...
          }
          ...
        }
      }
      ...
    }
    ```
5. **Use SpreadJS in an Angular application.**
    Modify **app.component.html** for viewing the SpreadJS component as shown below:

    ```HTML
    <gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
      <gc-worksheet [name]="sheetName" [dataSource]="data">
        <gc-column dataField="Name" width=300></gc-column>
        <gc-column dataField="Category" [width]=columnWidth></gc-column>
        <gc-column dataField="Price" [width]=columnWidth formatter="$ #.00"></gc-column>
        <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>
      </gc-worksheet>
    </gc-spread-sheets>
    ```

    Modify **app.component.ts** for preparing data for the SpreadJS component as shown below.
    You can enter a valid SpreadJS license key before initializing the component.

    ```TypeScript
    import { Component } from '@angular/core';
    import * as GC from "@mescius/spread-sheets";
    import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
    
    // Licensing SpreadJS
    var SpreadJSKey = "xxx";          // Enter a valid license key.
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [SpreadSheetsModule],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      spreadBackColor = 'aliceblue';
      sheetName = 'Goods List';
      hostStyle = {
        width: '800px',
        height: '600px'
      };
      data = [
        { Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },
        { Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },
        { Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },
        { Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
        { Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
        { Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }
      ];
      columnWidth = 100;
      workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }){
        let spread:GC.Spread.Sheets.Workbook = args.spread;
        let sheet = spread.getActiveSheet();
        sheet.getCell(0,0).text("My SpreadJS Angular Project").foreColor("blue");
      }
    }
    ```
6. **Build and run the project using Angular CLI**
    Build and run the new project using the following command:

    ```Shell
    ng serve
    ```

The following topics provide additional information about tag hierarchy and the Spread elements.

1. [Tag Hierarchy](/spreadjs/docs/v17/javascript_frameworks/angular/a2taghierarchy)
2. [Sheet Element](/spreadjs/docs/v17/javascript_frameworks/angular/a2sheetselement)
3. [Worksheet Element](/spreadjs/docs/v17/javascript_frameworks/angular/a2workelement)
4. [Column Element](/spreadjs/docs/v17/javascript_frameworks/angular/a2colelement)
5. [Excel IO Element](/spreadjs/docs/v17/javascript_frameworks/angular/angular-excelio)

> **Note:** To use the ExcelIO element in SpreadJS with Angular, you need to import the Excel IO module and license it separately using the same license key. For more information, refer to [Excel IO Element](/spreadjs/docs/v17/javascript_frameworks/angular/angular-excelio).