# SpreadJS with Angular

How to use SpreadJS in an Angular web application

## Content

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

>type=note
> **Note:** SpreadJS supports Angular versions 18, 19, 20 and 21.

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

    >type=note
    > **Note:** Angular 21 uses zoneless change detection by default for new projects, utilizing Signals instead of zone.js. SpreadJS is fully compatible with this default configuration.
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 styles.css as shown below:

    ```JSON
    @import "../node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
    ```
5. **Use SpreadJS in an Angular application.**
    Modify **app.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.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.html',
      styleUrls: ['./app.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/javascript-frameworks/angular/a2taghierarchy)
2. [Sheet Element](/spreadjs/docs/javascript-frameworks/angular/a2sheetselement)
3. [Worksheet Element](/spreadjs/docs/javascript-frameworks/angular/a2workelement)
4. [Column Element](/spreadjs/docs/javascript-frameworks/angular/a2colelement)
5. [Excel IO Element](/spreadjs/docs/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/javascript-frameworks/angular/angular-excelio).