SpreadJS 14
JavaScript Frameworks / SpreadJS with Angular
In This Topic
    SpreadJS with Angular
    In This Topic

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

    Note: The Angular versions 11 and 12 both are supported by SpreadJS.

    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:

      Command Prompt
      Copy Code
      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:

      Command Prompt
      Copy Code
      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:

      Command Prompt
      Copy Code
      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:

      angular.json
      Copy Code
      {
        ...
        "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:

      app.module.ts
      Copy Code
      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:

      app.component.html
      Copy Code
      <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 SpreadJS component as shown below:

      app.component.ts
      Copy Code
      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){
          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:

      Command Prompt
      Copy Code
      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
    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.