[{"id":"dc3147d7-d3fb-4bc1-b1b3-142c0633e6d3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca5ca1be-6d75-4ad1-880e-1589e3d52695","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ea870089-5ea1-499a-bb0c-29cf378ead8d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d304d34f-f329-4f3b-b45e-2acb478427f8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"3a79d24d-b853-4a51-a1e4-361feab06c57","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"5d31b3db-69bb-4388-9a57-450a63e44456","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"95e6d892-7bcd-4f6a-a152-504dec37c741","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ec137f4b-3069-487f-bb0c-69f40fe6805d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"9a2b2f20-5f3d-43a4-90d0-6f517fd3eebc","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"8d43dc09-ddd1-4c42-8b02-90765c4c705b","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a0c3d1e1-4a95-4eaf-808e-93242f2f9aee","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"bd44c5b0-cd6b-443c-95dc-b8d8054fe1d7","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fd5ccaa1-50b7-4c33-9ec5-c1eb48317119","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"ea61139a-0ecf-45ba-83c3-c2f8b20a4126","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca986d5e-dfda-46e9-84f3-f44e4248ab94","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]}]
        
(Showing Draft Content)

SpreadJS with Angular

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

Note: SpreadJS supports Angular versions 11, 12, 13, and 14.


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

    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:

    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:

    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:

    {
      ...
      "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:

    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:

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

    import { Component } from '@angular/core';
    import * as GC from "@grapecity/spread-sheets";
    @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:

    ng serve

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

  1. Tag Hierarchy

  2. Sheet Element

  3. Worksheet Element

  4. Column Element

  5. Excel IO Element

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.