# 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, and 16.
> 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
    cd spread-sheets-angular-cli
    ```
3. **Install SpreadJS NPM package**
    Install the SpreadJS NPM package using the following commands:

    ```Shell
    npm install @grapecity/spread-sheets
    npm install @grapecity/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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
                ],
                ...
              }
              ...
            }
            ...
          }
          ...
        }
      }
      ...
    }
    ```
5. **Use SpreadJS in an Angular application.**
    Modify the app.module.ts for importing the SpreadJS module as shown below:

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

    Modify the 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 the 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 "@grapecity/spread-sheets";
    
    // Licensing SpreadJS
    var SpreadJSKey = "xxx";          // Enter a valid license key.
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    @Component({
      selector: 'app-root',
      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/v16/javascript_frameworks/angular/a2taghierarchy)
2. [Sheet Element](/spreadjs/docs/v16/javascript_frameworks/angular/a2sheetselement)
3. [Worksheet Element](/spreadjs/docs/v16/javascript_frameworks/angular/a2workelement)
4. [Column Element](/spreadjs/docs/v16/javascript_frameworks/angular/a2colelement)
5. [Excel IO Element](/spreadjs/docs/v16/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/v16/javascript_frameworks/angular/angular-excelio).